You can install the following extensions for VS Code to make your life easier.

• Prettier - Code formatter
• Bracket Pair Colorizer - A customizable extension for colorizing matching brackets
• Material Icon Theme - Material Design Icons for Visual Studio Code
• ES7 React/Redux/GraphQL/React-Native snippets - Simple extensions for React, Redux and Graphql in JS/TS with ES7 syntax

For example in your App.tsx file if you type rnfs and press Tab it will automatically generate the following code for you.

import { View, Text } from 'react-native'
import React from 'react'
 
const App = () => {
  return (
    <View>
      <Text>App</Text>
    </View>
  )
}
 
export default App

1. In our App.tsx file we will change view to SafeAreaView

import { View, Text ,SafeAreaView } from 'react-native'
import React from 'react'
 
const App = () => {
  return (
    <SafeAreaView>
      <Text>App</Text>
    </SafeAreaView>
  )
}
 
export default App

2. In the app component I wan't to add a scroll feature so I will wrap the scrollview around the text component.

import { View, Text ,SafeAreaView, ScrollView } from 'react-native'
import React from 'react'
 
const App = () => {
  return (
    <SafeAreaView>
      <ScrollView>
      <Text>App</Text>
      </ScrollView>
    </SafeAreaView>
  )
}
 
export default App

3. Now Create a components folder inside the main folder so that we can create our components inside it.

4. Now make a file named FlatCards.tsx inside the components folder and add the following code or use shortcut rnfs to create a new file.

import { StyleSheet, Text, View } from 'react-native'
import React from 'react'
 
export default function FlatCards() {
  return (
    <View>
      <Text>FlatCards</Text>
    </View>
  )
}
 
const styles = StyleSheet.create({})

5. Now How to use this component in our App.tsx file.

   • First we will import the component in our App.tsx file.
   • Then inside the return statement we will use the component using self closing tag like this <FLatCards/>

    import { View, Text ,SafeAreaView, ScrollView } from 'react-native'
    import React from 'react'
    import FlatCards from './components/FlatCards'
    
    
    const App = () => {
      return (
        <SafeAreaView>
          <ScrollView>
           <FlatCards/>
          </ScrollView>
        </SafeAreaView>
      )
    }
    
    export default App