Getting Started: Developing Your First Android App in React Native 🥇

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 👏!