Getting Started: Developing Your First Android App in React Native ๐Ÿฅ‡

Photo by Jess Bailey on Unsplash

Getting Started: Developing Your First Android App in React Native ๐Ÿฅ‡

ยท

2 min read

Since we've learned about the React Native file structure and how to test our app, it's time to personalize it with our content. When I say content, I mean adding "Your Name" to the app ๐Ÿ“š.

  1. Open your React Native application in Visual Studio Code (VSCode).

  2. Open the virtual device manager in Android Studio.

  3. Now, execute the "npx react-native start" command.

  4. Go to app.tsx, delete everything, and add the following.

     import "React" from 'react';
     import {
         Text,
         View,
         SafeAreaView} from 'react-native'
    

    Here we have imported React that's necessary, after that we have added Text inside which we write our text, View which is somewhat similar to div we wrap our app inside it, SafeAreaView it makes sure that app is showing only relevant content according to user's phone ๐Ÿ“ฑ.

  5. Now we will make our app component

     function App() {
       return (
         <SafeAreaView>
           <View>
             <Text>Hello I am Cummins</Text>
             <Button title="Call me" />
           </View>
         </SafeAreaView>
       );
     }
    
     export default App;
    

    We need to use return(...) because this is a TypeScript component.

  6. Now just open your emulator to see the content. Wow! You've added your name and a button to call you ๐Ÿ†๐ŸŽ‰.

In conclusion, by following these steps, you can successfully personalize your React Native app by adding your name and a button to call you. This hands-on experience will not only enhance your understanding of React Native development but also serve as a foundation for more complex app development in the future. Happy coding ๐Ÿ‘!

ย