React vs React Native pt2

Navigation, Text Input, and more

Image by Memed_Nurrohmad from Pixabay

In part 1 of React vs React Native, I discussed basic React Native components such as View, Button, and Pressable. You also learned and how to style these components with the Style Sheet object. In today’s article, you will learn other foundational components needed in most React Native projects. If you desire to follow along with the code examples, click here!

SafeAreaView

The SafeAreView is like a special “div”. It prevents your Components from interfering with the status bar area. This is the area where the time and wifi icon are located. 

 return (
    <SafeAreaView style={styles.container}>
     //...
    </SafeAreaView>
  );

caveats

Though the SafeAreaView is a popular and easy solution for preventing interference with the Status bar area, it isn’t supported on all devices.

According to the React Navigation docs

While React Native exports a SafeAreaView component, this component only supports iOS 10+ with no support for older iOS versions or Android. In addition, it also has some issues, i.e. if a screen containing safe area is animating, it causes jumpy behavior.

SafeAreaView alternative

If you need consistent layout design across many devices and without any animation hiccups, consider using the useSafeAreaInsets hook given by the react-native-safe-area-context library Full implementation of this hook is beyond the scope of this article but you can play around with the code here!

TextInput

The TextInput component is similar to the input element found in a traditional React app but with a few caveats. For instance, instead of using onChange to handle state, it uses onChangeText which accepts a string instead of an object.

 return (
    <SafeAreaView>
      <TextInput
        style={styles.input}
        onChangeText={onChangeNumber}
        value={number}
        placeholder="placeholder"
        keyboardType="numeric"
      />
    </SafeAreaView>
  );

caveats

In a conventional React application, attributes such as input, name, id, and type are considered standard. However, React Native inputs diverge from this system. The following list are props worth knowing when using React Native’s TextInput.

keyboardType

This prop receives values like, numeric, email-address, and phone-pad.

onSubmitEditing

This prop’s function is called when the user hits submit on their device. When combined with a ref, it can focus the next input after a user has submitted a value.

blurOnSubmit

This prop is used to keep the keyboard from flickering when transitioning from one input to the next.

Navigation

The following code uses React Navigation to navigate between screens. The Navigation container is a mandatory wrapper to implement navigation in a React Native project. You can think of the Navigation container as a BrowserRouter . Inside the Navigation container is another React component known as a Stack Navigator. The Stack Navigator is a mandatory wrapper for Stack Navigation, or navigation between to different screens.The options prop allows developers to configure the header bar of a React Native project.

React Native sandbox

import { View,Text,Pressable,StyleSheet } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';

function HomeScreen({navigation}) {
  return (
    <View style={styles.view}>
    <Pressable 
      style={styles.btn} 
      onPress={()=>navigation.navigate("Screen1")}
    >
      <Text>Go to Screen1</Text>
    </Pressable>
    </View>
  );
}
function Screen1({navigation}) {
  return (
    <View style={styles.view}>
     <Pressable 
       style={styles.btn} 
       onPress={()=>navigation.navigate("Screen2")}
      >
        <Text>Go to Screen2</Text>
      </Pressable>
    </View>
  );
}
function Screen2({navigation}) {
  return (
    <View style={styles.view}>
      <Pressable  
        style={styles.btn}  
        onPress={()=>navigation.navigate("Home")}
       >
        <Text>Go To Home Screen</Text>
      </Pressable>
    </View>
  );
}

const styles = StyleSheet.create({
  btn:{
    borderWidth:1,
    height:40,
    borderColor:'#f4511e',
    padding:10,
    width:"80%",
    alignItems:"center"
  },
  view:{
    flex: 1, 
    alignItems: 'center', 
    justifyContent: 'center' 
  }
})

const Stack = createNativeStackNavigator();

function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator
        screenOptions={{ 
            headerStyle: {
              backgroundColor: '#f4511e',
            },
            headerTintColor: '#fff', 
          }}
      >
        <Stack.Screen
          name="Home"
          component={HomeScreen}
          options={{
            title:"Home"
          }}
        />
        <Stack.Screen
          name="Screen1"
          component={Screen1}
          options={{
            title:"Screen1"
          }}
        />
        <Stack.Screen
          name="Screen2"
          component={Screen2}
           options={{
             title:"Screen2"
           }}
        />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

export default App;

This concludes today’s lesson. If you have questions, don’t be afraid to message me on twitter or LinkedIn.

Ways to support my newsletter

🖥 If you believe this content is valuable, share it on social media

🎤 If you believe I would be a good fit for a podcast, let your favorite podcaster know or invite me on

Connect with me

Connect with me on LinkedIn!

Connect with me on Twitter!