Switch, Touchables, Navigation in React Native

Switch:

This is a controlled component that requires an onValueChange callback that updates the value prop in order for the component to reflect user actions. If the value prop is not updated, the component will continue to render the supplied value prop instead of the expected result of any user actions.

Example:

import React,{useState} from "react";

import { View,Text, StyleSheet, Button,Switch } from "react-native";

const Switchcomp=()=>{

const [checked, setChecked]= useState(false);

const toggleswitch=()=>{setChecked (!checked)};

return(

<Switch

trackColor={{ false: 'grey', true: "black" }}

thumbColor={checked ? "green" : "blue"}

value={checked}

onValueChange={toggleswitch}

</View>

)

}

Output:

React Native Touchables:

Touchable components provide the capability to capture the tapping functionality. The touchables component can be implemented as an alternative of basic button, if they are not look right for your app. Using these components, you build your own button. Tapping on these components, you can display the feedback.

The touchables components do not provide any default styling, so you will need to do your style for presenting nicely in the app.

Types of Touchable Components:

There are four touchable components provided by React Native. Selection of this component depends on the kind of feedback you want to provide:

TouchableHighlight
TouchableNativeFeedback
TouchableOpacity
TouchableWithoutFeedback.

React Native TouchableHighlight:

The TouchableHighlight can be used where you would use a button or link on the web. The background of this component becomes dark on pressing it.

Example:

import React,{useState} from "react"

import {View,Text,TouchableHighlight} from 'react-native'

const Touchablecomp=()=>{

const [count, setCount]=useState(0);

const Event =()=>setCount(count + 1)

return(

<View>

<Text>Count: {count}</Text>

<Text style={{color:'blue',fontSize:20}}>presshere</Text>

</TouchableHighlight>

</View>

)

}

export default Touchablecomp

by rendering this in the main component you will get the output.

Output:

React Native TouchableNativeFeedback

The TouchableNativeFeedback makes a view to response properly on touch. This component works only for Android operating system. It uses native state drawable to display the touch feedback.It supports only a single View instance as a child node.

Example:

import React,{useState} from "react"

import {View,Text,TouchableNativeFeedback} from 'react-native'

const Touchablecomp=()=>{

const Event=()=>{alert('you pressed')}

return(

<View>

<Text style={{color:'blue',fontSize:20}}>presshere</Text>

</TouchableNativeFeedback>

</View>

)

}

export default Touchablecomp

Output:

TouchableWithoutFeedback:

The TouchableWithoutFeedback is used when the user wants to handle the tap functionality but doesn't want to display any feedback.

Example:

import React,{useState} from "react"

import {View,Text,TouchableWithoutFeedback} from 'react-native'

const Touchablecomp=()=>{

const [count, setCount]=useState(0)

const Event=()=>{setCount (count+1)}

return(

<View>

<Text style={{color:'blue',fontSize:20}}>presshere</Text>

</TouchableWithoutFeedback>

<Text style={{fontSize:20}}>count:{count}</Text>

<Text style={{fontSize:20}}>previous:{count-1}</Text>

</View>

)

}

export default Touchablecomp

output:

React Native TouchableOpacity

The TouchableOpacity wrapper is used to reduce the opacity of button. It allows background to be seen while the user press down. Lightens the opacity of the entire element when pressed.

Example:

import React,{useState} from "react"

import {View,Text,TouchableOpacity} from 'react-native'

const Touchablecomp=()=>{

const [count, setCount]=useState(0)

const Event=()=>{setCount (count+1)}

return(

<View>

<Text style={{color:'blue',fontSize:20}}>presshere</Text>

</TouchableOpacity>

<Text style={{fontSize:20}}>count:{count}</Text>

<Text style={{fontSize:20}}>previous:{count-1}</Text>

</View>

)

}

export default Touchablecomp

output:

React Navigation:

React Native Navigation is used for managing the presentation, and transition between multiple screens. There are two types of navigation built in mobile applications. These are stack navigation and tabbed navigation patterns.

Installing the React native Navigation:

To work with react Native navigation we have to Install some built in libraries.

You can install React navigation package using the below command,

Npm install –save react navigation

Yarn add react-navigation

After successful execution of the above command, it adds the "react-navigation

Installing the navigation dependencies:

After installing the navigation we need to install some libraries to wor with navigation. You can install the libraries by using the following command,

npm install react-native-screens react-native-safe-area-context

yarn add react-native-screens react-native-safe-area-context

after installing these libraries you can create navigation to your application.

Types of navigation:

1.stack navigation

2.bottom tab navigation

3.drawer navigation

Stack Navigation:

Stack Navigator provides a way for your app to transition between screens where each new screen is placed on top of a stack.

Installing Stack Navigation:

To work with stack navigator first ensure you all the dependencies installed then install the stack navigation using the following command,

npm install @react-navigation/stack

yarn add @react-navigation/stack

and also install the gesture handler using the below command,

npm install react-native-gesture-handler

yarn add react-native-gesture-handler.

API Definition:

first you need import React, createStackNavigator, NavigationContainer ,then create navigation container inside a function ,and stack.Navigator inside the Navigation container.

Then create a stack.screen for different screens you want to navigate and assign a name to the screen and asign a component that you want to display on the screen.

import React from 'react';

import { createStackNavigator } from '@react-navigation/stack';

import { NavigationContainer } from '@react-navigation/native';

const Stack = createStackNavigator();

import Seclistcomp from '../components/sectionlist';

import Flatlistcomp from '../components/list1';

import Textcomp from '../components/text';

const MyStack=() =>{

return (

<Stack.Navigator>

<Stack.Screen name="Home" component={Textcomp} />

<Stack.Screen name="sectionlist" component={Seclistcomp} />

<Stack.Screen name="flatlist" component={Flatlistcomp} />

</Stack.Navigator>

</NavigationContainer>

);

}

export default MyStack

Those components receive a prop called navigation,route which has various methods to link to other screens. example you can use navigation.navigate for navigating to the screen you want to navigate.it will take the first screen as default root while opening the application. fRom the initial route you can use navigation.navigate for navigating other screens.

import React from "react";

import {View,Button,Image} from 'react-native';

const Textcomp =({navigation, route}) =>{return(

<Button title='go to seclist'onPress={()=>navigation.navigate('sectionlist') }/>

<Button title='go to flatlist'onPress={()=>navigation.navigate('flatlist')}/>

</View>

)}

The components we navigating using this buttons also have props navigation, route.

const Flatlistcomp=({navigation, route})=>{return(native components that you want to display)}

By pressing the button you can navigate to the different screens, it will automatically provide the back option.

You can Also add Styles to the navigator like,

<Stack.Screen name="Home" component={Textcomp}

options={{

title: 'My home',

headerStyle: {

backgroundColor: '#f4511e',

headerTintColor: '#fff',

headerTitleStyle: {

fontWeight: 'bold',

}}/>

Bottom Tab Navigator:

A simple tab bar on the bottom of the screen that lets you switch between different routes. Routes are lazily initialized -- their screen components are not mounted until they are first focused.

Installing the Bottom Tab Navigation:

To work with Bottom tab navigator make sure that you have installed the dependencies for navigation then install Bottom tab navigation using the Following Command,

npm install @react-navigation/bottom-tabs

yarn add @react-navigation/bottom-tabs

API Definition:

First import creatbottomtab navigator and navigator container. Then create bottom tab navigator method. Then create a function and create navigation container inside the function. Then create tab.navigator inside tab.navigator create tab.screens and assign a component that you want to navigate using the tab. Bottom tab navigations will automatically to the routing between screens.

You don’t need to use navigation.navigate like in stack navigation.

Example:

import React from 'react';

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

import { NavigationContainer } from '@react-navigation/native';

import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';

import Seclistcomp from '../components/sectionlist';

import Flatlistcomp from '../components/list1';

import Textcomp from '../components/text';

const Tab = createBottomTabNavigator();

const Tabnav=()=> {

return (

<Tab.Navigator

screenOptions={{

tabbarstyle:{position:'absolute'},

}}>

<Tab.Screen name="Home" component={Textcomp} />

<Tab.Screen name="seclist" component={Flatlistcomp} />

<Tab.Screen name="flatlist" component={Seclistcomp} />

</Tab.Navigator>

</NavigationContainer>

);

}

Then use the component inside the main application component will give you access to navigate.

Output:

You can also add icons using libraries.

import React from 'react';

import { SectionList, Text, View } from 'react-native';

import { NavigationContainer } from '@react-navigation/native';

import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';

import Seclistcomp from '../components/sectionlist';

import Flatlistcomp from '../components/list1';

import Textcomp from '../components/text';

import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';

const Tab = createBottomTabNavigator();

const Tabnav=()=> {

return (

<Tab.Navigator

initialRouteName="Home"

screenOptions={{tabBarActiveBackgroundColor:'grey',

tabBarStyle:{height:60,backgroundColor:'skyblue'},

tabBarLabelStyle:{color:'blue',fontWeight:'bold'}

}}

<Tab.Screen

name="Home"

component={Textcomp}

options={{tabBarIcon: ({ color, size }) => (

<MaterialCommunityIcons name="home" color={'blue'} size={30} />),

}}

<Tab.Screen

name="flatlist"

component={Flatlistcomp}

options={{tabBarIcon: ({ color, size }) => (

<MaterialCommunityIcons name="clipboard-list" color={'blue'} size={30} />),

}}

<Tab.Screen

name="seclist"

component={Seclistcomp}

options={{

tabBarIcon: ({ color, size }) => (

}}

</Tab.Navigator>

</NavigationContainer>

);

}

export default Tabnav

output:

Drawer Navigation:

React Native Drawer Navigation is an UI panel which displays the app's navigation menu. By default it is hidden when not in use, but it appears when user swipes a finger from the edge of the screen or when user touches at the top of drawer icon added at app bar.

Installing Drawer Navigation:

To use this Navigator first Ensure that you have installed all the dependencies then install the drawer navigation using the Below command,

npm install @react-navigation/drawer

yarn add @react-navigation/drawer

You also need to install react-native-gesture-handler and react-native-reanimated by using the below command,

npm install react-native-gesture-handler react-native-reanimated

yarn add react-native-gesture-handler react-native-reanimated

Example:

import 'react-native-gesture-handler';

import React from 'react';

import { createDrawerNavigator } from '@react-navigation/drawer';

import { NavigationContainer } from '@react-navigation/native';

import Flatlistcomp from '../screens/list1';

import Seclistcomp from '../screens/sectionlist';

import Textcomp from '../screens/text';

const Drawer = createDrawerNavigator();

const MyDrawer=()=> {

return (

<Drawer.Navigator>

<Drawer.Screen name="home" component={Textcomp} />

<Drawer.Screen name="seclist" component={Seclistcomp} />

<Drawer.Screen name="flatlist" component={Flatlistcomp} />

</Drawer.Navigator>

</NavigationContainer>

);

}

export default MyDrawer

it is similar to Tab navigation firt import navigation container and create drawer navigator, then create a component and create navigationcontainer. Inside create navigator create drawer.navigator . inside drawer.navigator create drawer.screen and assign a name and component that you want to render in that screen.

Then export the component and render that inside the main component.

Output:

It will create a dashboard option for screens . you can navigate to the screens using that list of screens in the dashboard. You can also add icons to the dashboard.

Search This Blog

Mayura AppTech

Switch, Touchables, Navigation in React Native

Comments

Post a Comment

Popular posts from this blog

Oracle Database Server Architecture: Overview

Oracle E-Business Suite (EBS) - Introduction

Advantages and Disadvantages of React Native