React Native Call Function in Functional Component Example Tutorial

Hello Friends, As we all know react native’s new functional component structure is spreading very fast among developers because of their simple way of coding. Many of us new beginner developer doesn’t know how to call a method or function in functional component because our main Component is by default functional component. There are some changes between both class and functional component. Buttons and functions are the base of every react native application because using them we can set Click functionality and set onPress events to perform a certain task. So in this tutorial we would React Native Call Function in Functional Component Android iOS Example Tutorial.

Content in this project React Native Call Function in Functional Component Android iOS Example Tutorial:

1. Open your project’s main App.js file and import View, StyleSheet, Button and Alert component.

<br />
import React from ‘react’;</p>
<p>import { View, StyleSheet, Button, Alert } from ‘react-native’;

import React from ‘react’;

import { View, StyleSheet, Button, Alert } from ‘react-native’;

2. Creating our main export default function FirstApp(). This is our main Root functional component .

<br />
export default function FirstApp() {</p>
<p>}

export default function FirstApp() {

}

3. Creating a Constant function named as showMessage() with Fat arrow syntax known as =()=> . We must have to use the fat arrow syntax in order to use the methods in functional component. Inside this function we would simply display a Alert dialog box.

<br />
  const showMessage=()=>{</p>
<p>   Alert.alert(‘Function Called…’) ;</p>
<p>  }

const showMessage=()=>{

Alert.alert(‘Function Called…’) ;

}

4. Creating return() block to display UI components on the screen. Inside it we would Make a Root View component and 1 Button component. On button onPress event we would call the showMessage() method.

<br />
  return (</p>
<p>    <View style={styleSheet.MainContainer}></p>
<p>      <Button onPress={showMessage} title=”Click Here To Call Function in Functional Component” /></p>
<p>    </View></p>
<p>  );

return (

</View>

);

5. Creating Style.

<br />
const styleSheet = StyleSheet.create({</p>
<p>  MainContainer: {<br />
    flex: 1,<br />
    justifyContent: ‘center’,<br />
    alignItems: ‘center’,<br />
    backgroundColor: ‘#FAFAFA’,<br />
    padding: 10<br />
  },</p>
<p>});

const styleSheet = StyleSheet.create({

MainContainer: {

flex: 1,

justifyContent: ‘center’,

alignItems: ‘center’,

backgroundColor: ‘#FAFAFA’,

padding: 10

});

7. Complete Source Code for App.js file:

<br />
import React from ‘react’;</p>
<p>import { View, StyleSheet, Button, Alert } from ‘react-native’;</p>
<p>export default function FirstApp() {</p>
<p>  const showMessage=()=>{</p>
<p>   Alert.alert(‘Function Called…’) ;</p>
<p>  }</p>
<p>  return (</p>
<p>    <View style={styleSheet.MainContainer}></p>
<p>      <Button onPress={showMessage} title=”Click Here To Call Function in Functional Component” /></p>
<p>    </View></p>
<p>  );<br />
}</p>
<p>const styleSheet = StyleSheet.create({</p>
<p>  MainContainer: {<br />
    flex: 1,<br />
    justifyContent: ‘center’,<br />
    alignItems: ‘center’,<br />
    backgroundColor: ‘#FAFAFA’,<br />
    padding: 10<br />
  },</p>
<p>});