React Native app ideas for beginners

If you are learning or interested in mobile application development. React Native is a great option to create your applications. At the beginning it may seem a bit scary but if you have previous knowledge in React js, learning React Native will be easier.

One of the most important points is the configuration of the setup environment, this varies depending on the device we use to develop or the operating system in which we want to run our application, in the following link you will find the complete guide to configure your setup environment.

After having correctly configured our setup environment, the first thing to do will be creating the app, in this case I will use React Native CLI

npx react-native init myFirstApp

Once our app has been created correctly, we will delete all content of the App.js file located in the root of the project, here we will develop the code of our app.

One of the main differences between React js and React Native are the components, while in React js HTML tags are used, React Native uses its own components, let's see some examples:

If we want to use a container of other elements instead of using tags like <div>, <section>, <main>, etc. we must use <View>, for the texts instead of tags like <h1>, <span>, <p>, etc. we use <Text>, for the images we change <img> to <Image> , in the following link you can consult all the components that are used in React Native.

For our application we will use some of the components mentioned above

import React from 'react';
import {View, Text, Image, SafeAreaView, Button, TextInput} from 'react-native';

export const App = () => {
 return (
   <SafeAreaView>
     <View>
       <Image source={require('./logo.png')} />
       <Text>My First App</Text>
       <TextInput placeholder="Type your name" />
       <Button onPress={() => null} title="Submit" />
     </View>
   </SafeAreaView>
 );
};

To run our app we go to the directory we just created cd myFirstApp, and run one of the following commands:

npx react-native run-android

npx react-native run-ios

or if you use yarn as your dependency manager with:

yarn run android

yarn run ios

It should look like this:

As we can see, some components will take up all the available space, for some it is necessary to give them values, for this it is necessary to apply styles, the styles can be applied directly in the component but to move the styles away from the rendering function and that the code is easier to understand it is recommended to create a style sheet, for that we will use StyleSheet that is an abstraction similar to CSS.

We will create a constant that will receive an object and we define the different classes with their styles, in the component that we want to apply the style, in the style property we reference the constant and the class with the corresponding styles.

import {..., StyleSheet,} from 'react-native';

export const App = () => {
 return (
   <SafeAreaView style={{flex: 1}}>
     <View style={styles.container}>
       <Image … style={styles.logo} />
       <Text style={styles.title}>My First App</Text>
       <TextInput … style={styles.input}/>
       <Button onPress={() => null} title="Submit" />
     </View>
   </SafeAreaView>
 );
};

const styles = StyleSheet.create({
 container: {
   padding: 20,
 },
 logo: {
   alignSelf: 'center',
   marginBottom: 50,
 },
 title: {
   fontSize: 22,
   fontWeight: 'bold',
   marginBottom: 20,
 },
 input: {
   borderWidth: 1,
   borderColor: 'gray',
   padding: 8,
   borderRadius: 10,
   marginBottom: 20,
 }
});

React Native allows us to use React js fundamentals such as states, props and event handling

export const App = () => {
 const [name, setName] = useState('');
 const [showMessage, setShowMessage] = useState(false);

 const OnPress = () => {
   setShowMessage(true);
 };

 return (
   <SafeAreaView style={{flex: 1}}>
     <View style={styles.container}>
       ...
       <TextInput … onChangeText={setName} />
       <Button … onPress={OnPress}/>
     </View>
   </SafeAreaView>
 );
};

The next step will be to create a new component which will receive the name as an argument and will display a message on the screen.

export const App = () => {...
};

const Message = ({name}) => {
 return (
   <View>
     <Text>{`Hi ${name} from Parrolabs! 👋😎`}</Text>
   </View>
 );
};

const styles = StyleSheet.create({...
})

After pressing the button, the onPress function will be called, which activates the variable that will show us the message on the screen

export const App = () => {
 const [name, setName] = useState('');
 const [showMessage, setShowMessage] = useState(false);

 const OnPress = () => {
   setShowMessage(true);
 };

 return (
   <SafeAreaView style={{flex: 1}}>
     <View style={styles.container}>
       <Image source={require('./logo.png')} style={styles.logo} />
       <Text style={styles.title}>My First App</Text>
       <TextInput
         placeholder="Type your name"
         style={styles.input}
         onChangeText={setName}
       />
       <Button onPress={OnPress} title="Submit" />
       {showMessage && <Message name={name} />}
     </View>
   </SafeAreaView>
 );
};