{"id":42980,"date":"2016-12-16T14:58:19","date_gmt":"2016-12-16T09:28:19","guid":{"rendered":"http:\/\/www.tothenew.com\/blog\/?p=42980"},"modified":"2018-02-26T12:23:10","modified_gmt":"2018-02-26T06:53:10","slug":"how-to-solve-some-common-coding-challenges-in-react-native","status":"publish","type":"post","link":"https:\/\/www.tothenew.com\/blog\/how-to-solve-some-common-coding-challenges-in-react-native\/","title":{"rendered":"How to Solve Some Common Coding Challenges in React Native?"},"content":{"rendered":"

React Native<\/a> is a\u00a0framework that provides the facility to develop applications for both Android <\/a>and iOS.\u00a0If you are beginner on React Native, you can read more about it on React Native Concept<\/a> or React Native Website<\/a>.<\/p>\n

For the last couple of months, I have been extensively working on this framework and through this blog I wanted to share some of the challenges I faced while coding with React Native<\/a>.<\/p>\n

The challenges are documented as follows;<\/p>\n

1) How we can add the style classes dynamically in render function?<\/strong>
\nIn React Native we don\u2019t have display : none<\/code> property. If there is no display:none<\/code> property then the question arises how one can hide\/show a view or a component.<\/p>\n

2) How to make a list scrollable if we are using ListView component of React Native?<\/strong><\/p>\n

So, let’s discuss this one by one and understand how to solve them<\/p>\n

We deliberately created certain solutions we thought will be helpful which are given below. <\/strong><\/p>\n

1) In React Native we don\u2019t have display : none property. But if needed one can hide the component using the style properties height, width, opacity<\/code><\/p>\n

[js]
\n\/\/index.android.js file<\/p>\n

import React, { Component } from ‘react’;
\nimport {
\n AppRegistry,
\n StyleSheet,
\n Text,
\n View
\n} from ‘react-native’;
\nexport default class ReactNativeHacks extends Component {
\n render() {
\n return (
\n <View style={styles.container}>
\n <Text style={styles.welcome}>
\n Welcome to React Native!
\n <\/Text>
\n <Text style={styles.instructions}>
\n To get started, edit index.android.js
\n <\/Text>
\n <Text style={styles.instruction2}>
\n Double tap R on your keyboard to reload,{‘\\n’}
\n Shake or press menu button for dev menu
\n <\/Text>
\n <\/View>
\n );
\n }
\n}
\nconst styles = StyleSheet.create({
\n container: {
\n flex: 1,
\n justifyContent: ‘center’,
\n alignItems: ‘center’,
\n backgroundColor: ‘#F5FCFF’,
\n },
\n welcome: {
\n fontSize: 20,
\n textAlign: ‘center’,
\n margin: 10,
\n },
\n instructions: {
\n textAlign: ‘center’,
\n color: ‘#333333’,
\n marginBottom: 5,
\n },
\n instruction2: {
\n textAlign: ‘center’,
\n color: ‘#333333’,
\n marginBottom: 5,
\n }
\n});
\nAppRegistry.registerComponent(‘ReactNativeHacks’, () => ReactNativeHacks);
\n[\/js]<\/p>\n

Output:<\/strong><\/p>\n

\"download\"<\/p>\n

Now if we want to hide the second paragraph we can use the following class<\/p>\n

[js]
\ninstructions: {
\n textAlign: ‘center’,
\n color: ‘#333333’,
\n marginBottom: 5,
\n opacity:0
\n}, <\/p>\n

[\/js]<\/p>\n

Output:<\/strong><\/p>\n

\"download<\/p>\n

or can use the style class with height, width<\/code><\/p>\n

[js]
\ninstructions: {
\n textAlign: ‘center’,
\n color: ‘#333333’,
\n marginBottom: 5,
\n height:0,
\n width:0,
\n opacity:0
\n},
\n[\/js]<\/p>\n

Output:<\/strong><\/p>\n

\"download<\/p>\n

Using only opacity does not free the space occupied by the text or view component. So for that what we need to do is just add the height and width of component 0.<\/p>\n

Use the below command to show \/ hide component or to add or remove styling classes dynamically.<\/strong><\/p>\n

[js]
\n\/\/index.android.js file<\/p>\n

import React, { Component } from ‘react’;
\nimport {
\n AppRegistry,
\n StyleSheet,
\n Text,
\n View,
\n TouchableNativeFeedback
\n} from ‘react-native’;
\nexport default class ReactNativeHacks extends Component {
\n constructor(props){
\n super(props);
\n this.state = {
\n flag: true
\n }
\n }
\n buttonClick() {
\n this.setState({
\n flag: !this.state.flag \/\/ toggle state `flag` on button click
\n })
\n }
\n render() {
\n return (
\n <View style={styles.container}>
\n { this.state.flag && \/\/ show\/hide on basis of `this.state.flag` value
\n <Text style={styles.welcome}>
\n Hide or Show text dynamically by just clicking the button.
\n <\/Text>
\n }
\n <TouchableNativeFeedback>
\n <View style={styles.button}>
\n <Text style={styles.buttonText} \/\/call function `buttonClick`
\n onPress={() => { this.buttonClick()}}>Click here.<\/Text>
\n <\/View>
\n <\/TouchableNativeFeedback>
\n <\/View>
\n );
\n }
\n}
\nconst styles = StyleSheet.create({
\n container: {
\n flex: 1,
\n justifyContent: ‘center’,
\n alignItems: ‘center’,
\n backgroundColor: ‘#F5FCFF’,
\n },
\n welcome: {
\n fontSize: 20,
\n textAlign: ‘center’,
\n margin: 10,
\n },
\n button: {
\n backgroundColor: ‘#ff8000’,
\n borderRadius: 4,
\n padding:10
\n },
\n buttonText : {
\n color : ‘#fff’,
\n textAlign:’center’,
\n fontWeight: ‘bold’
\n },
\n});
\nAppRegistry.registerComponent(‘ReactNativeHacks’, () => ReactNativeHacks);
\n[\/js]<\/p>\n

In this example the state that defines whether a component should be displayed or not is decided by the state flag<\/code>.<\/p>\n

[js]
\n { this.state.flag &&
\n <Text style={styles.welcome}>
\n Hide or Show text dynamically by just clicking the button.
\n <\/Text>
\n }
\n[\/js]<\/p>\n

The same output can be generated using the code like :
\nBy adding this code, if this.state.flag<\/code> is true then statement ‘Hide or Show text dynamically by just clicking the button.’ displays otherwise the null is rendered.<\/p>\n

We can also provide other component in place of null that we want to render.<\/p>\n

[js]
\n{ this.state.flag ?
\n <Text style={styles.welcome}>
\n Hide or Show text dynamically by just clicking the button.
\n <\/Text> : null
\n}
\n[\/js]<\/p>\n

We can also show\/hide using the styling class.
\nThis also produces the same result as the above code. But in this we provide the styles dynamically according to the value of this.state.flag<\/code>. If this.state.flag<\/code> is true then styles.welcome<\/code> class is applied otherwise styles.hideClass<\/code> is applied which has heigh: 0<\/code> width: 0<\/code>.<\/p>\n

[js]
\n<Text style={this.state.flag ? styles.welcome : styles.hideClass}>
\n Hide or Show text dynamically by just clicking the button.
\n<\/Text>
\n[\/js]<\/p>\n

Define hideClass in Stylesheet.create()<\/p>\n

[js]
\nhideClass: {
\n height: 0,
\n width: 0
\n}
\n[\/js]<\/p>\n

Output:<\/strong><\/p>\n

\"download<\/p>\n

In this output the text hides as soon as the button is clicked.<\/p>\n

2) In case of listview, the list is scrollable by default, but in few cases, the list is not scrollable, so if someone wants to scroll the list vertically just define the flex property as 1 to all the parent views of the listview.<\/p>\n

[js]
\n\/\/index.android.js file<\/p>\n

import React, { Component } from ‘react’;
\nimport {
\n AppRegistry,
\n StyleSheet,
\n Text,
\n View,
\n ListView,
\n} from ‘react-native’;
\nexport default class ReactNativeHacks extends Component {
\n constructor() {
\n super();
\n const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
\n this.state = {
\n dataSource: ds.cloneWithRows([
\n ‘row 1’, ‘row 2’, ‘row 3’, ‘row 4’, ‘row 5’, ‘row 6’, ‘row 7’, ‘row 8’, ‘row 9’, ‘row 10’, ‘row 11’, ‘row 12’, ‘row 13’
\n ]),
\n };
\n }
\n render() {
\n return (
\n <View style={styles.container}>
\n <Text style={styles.welcome}>
\n Example of Listview
\n <\/Text>
\n <View style={styles.container2}> \/\/flex:1, parent View of ListView
\n <Text style={styles.listData}>Scrollable List<\/Text>
\n <ListView
\n dataSource={this.state.dataSource}
\n renderRow={(rowData) =>
\n <Text style={styles.listValue}>{rowData}<\/Text> }
\n \/>
\n <\/View>
\n <Text style={styles.welcome}>
\n End of Listview
\n <\/Text>
\n <\/View>
\n );
\n }
\n}
\nconst styles = StyleSheet.create({
\n container: {
\n flex: 1,
\n backgroundColor: ‘#F5FCFF’,
\n padding: 20
\n },
\n container2: {
\n flex: 1,
\n },
\n listData: {
\n fontSize: 20,
\n },
\n listValue: {
\n fontSize: 20,
\n paddingVertical:10
\n },
\n welcome: {
\n fontSize: 20,
\n textAlign: ‘center’,
\n margin: 10,
\n },
\n});
\nAppRegistry.registerComponent(‘ReactNativeHacks’, () => ReactNativeHacks);
\n[\/js]<\/p>\n

Output:<\/strong><\/p>\n

\"download<\/p>\n

Find the code snippets\u00a0here<\/a>\u00a0for the above examples.<\/p>\n","protected":false},"excerpt":{"rendered":"

React Native is a\u00a0framework that provides the facility to develop applications for both Android and iOS.\u00a0If you are beginner on React Native, you can read more about it on React Native Concept or React Native Website. For the last couple of months, I have been extensively working on this framework and through this blog I […]<\/p>\n","protected":false},"author":1027,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"iawp_total_views":7},"categories":[3429,1772,1],"tags":[4845,4255,4256,3566,55,3505,3512,2046],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/42980"}],"collection":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/users\/1027"}],"replies":[{"embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/comments?post=42980"}],"version-history":[{"count":2,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/42980\/revisions"}],"predecessor-version":[{"id":52762,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/42980\/revisions\/52762"}],"wp:attachment":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/media?parent=42980"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/categories?post=42980"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/tags?post=42980"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}