08.10.2020 Views

How to Create Bridge in React Native for iOS and Android?

React Native is developed in such a way that we will create a bridge between the language and therefore the JavaScript code. A “bridge” is nothing but how to line up communication between native platform and React Native.

React Native is developed in such a way that we will create a bridge between the language and therefore the JavaScript code. A “bridge” is nothing but how to line up communication between native platform and React Native.

SHOW MORE
SHOW LESS

You also want an ePaper? Increase the reach of your titles

YUMPU automatically turns print PDFs into web optimized ePapers that Google loves.

Export default class App extends Component{

turnOn = () => {

NativeModules.Bulb.turnOn();

}

render(){

return(

<View style = {styles.container}>

<Text style = {styles.welcome}> Welcome to Light App !! </Text>

<TouchableOpacity onPress = {this.turnOn}>

</TouchableOpacity>

</View>

);

}

}

const styles = StylesSheet.create ({

container : {

flex :1,

justifyContent : ‘center’,

alignItems : ‘center’,

backgroundColor : ‘#F5FCFF’,

},

});

})

Now open Xcode console to ascertain the logs and that we can see that Swift turnOn method is named from JavaScript

code. (As we've done logging within the method)

Step 2 - Understanding GCD Queue and fixing the warning:

Now let's fix the warning shown at rock bottom of the simulator and in browser console:

To understand it better let's understand about all the thread React Native runs:

Hooray! Your file is uploaded and ready to be published.

Saved successfully!

Ooh no, something went wrong!