React Native — Touchables and Navigation

Photo by Museums Victoria on Unsplash

React Native is a mobile development that’s based on React that we can use to do mobile development.

In this article, we’ll look at how to use it to create an app with React Native.

TouchableNativeFeedback

The TouchableNativeFeedback component is available on Android to let us display an ink service reaction when we touch it.

For example, we can write:

import React from 'react';
import { View, StyleSheet, TouchableNativeFeedback, Text } from 'react-native';
export default function App() {
  return (
    <View style={styles.container}>
      <TouchableNativeFeedback
        onPress={() => {
          alert('You tapped the button!');
        }}
      >
        <View style={styles.button}>
          <Text style={styles.buttonText}>TouchableNativeFeedback</Text>
        </View>
      </TouchableNativeFeedback>
    </View >
  );
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  button: {
    marginBottom: 30,
    width: 260,
    alignItems: 'center',
    backgroundColor: '#2196F3'
  },
  buttonText: {
    textAlign: 'center',
    padding: 20,
    color: 'white'
  }
});