Skip to end of metadata
Go to start of metadata

Import React Native


 

Method 1Method 2

'use strict';

import React, {
AppRegistry,
Component,
StyleSheet,
Text,
View
} from 'react-native';

'use strict';

var React = require('react-native');

var {
AppRegistry,
StyleSheet,
Text,
View,
} = React;


Style Sheet



var styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});




View /  Text


<View style={styles.container}>

</View>


<Text style={styles.instructions}>
To get started, edit index.ios.js
</Text>



Image:


 


 

Image
 
<Image
 source=require('image.png')
/>
 
<image
source={{uri: 'http:www.xyz.com/image.png'
>
 
var images = [
 require('image.png'),
 require('image.png'),
]
 
<Image
 source={data[0]}
>
 

StatusBar 


StatusBarIOS.setStyle('light-content');

 

 

AlertView


 

AlertIOS.alert('Search', 'You pressed the search button')

 

 

 

Organising CSS file in React Native


>index.ios.js

var styles =  require('./styles');


 

 >style>navbar.js 

 

'use strict';
var React = require('react-native');
var {StyleSheet} = React;

module.exports = StyleSheet.create({

appearance: {
flexDirection:'row',
paddingTop:30,
paddingBottom:10,
backgroundColor: 'gray',
},

title: {
flex:1,
color:'white',
textAlign:'center',
fontWeight:'bold',
backgroundColor: 'black'

},
button: {
width:50,
color:'white',
textAlign: 'center',
backgroundColor: 'red'
}

});

 

>style>global.js 

 

'use strict';
var React = require('react-native');
var {StyleSheet} = React;

module.exports = StyleSheet.create({
mainContainer:{
flex:1
},

content:{
flex:1,
backgroundColor:'#CCC'
}

});

>style.js

 

'use strict';

module.exports = {

navbar: require('./style/navbar'),
font: require('./style/font')

}

 

 

 



Organising React Component


>component>modellistview.js

Modellistview.js
'use strict'
var React = require('react-native');
var {
  Text,
  TextInput,
  AlertIOS,
  View
} = React;
var styles = require('../styles');

var MediaListView = React.createClass({
  render: function(){
    return(
      <View style = {styles.global.content}>
      <SearchBar
        onSearch={(event) => {
          var searchString = event.nativeEvent.text;
          AlertIOS.alert("Search String", searchString);
        }}
      />
       <Text >
          When designing interfaces, break down the common design elements (buttons, form fields, layout components, etc.) into reusable components with well-defined interfaces. That way, the next time you need to build some UI, you can write much less code. This means faster development time, fewer bugs, and fewer bytes down the wire.
        </Text>
      </View>
    );
  }
});
module.exports = MediaListView;

 

 

 

Using Component :  sample for navigatorIOS

Using Component
var MediaListView = require('./component/medialistview');
class iTunesBrowser extends Component {
  render() {
    return (
      <NavigatorIOS
      style={styles.global.mainContainer}
      barTintColor='#2a3742'
      tintColor="black"
      titleTextColor="white"
      initialRoute= {{
          component: MediaListView,
          title: 'iTunesBrowser',
          rightButtonTitle: 'Search',
          onRightButtonPress: () => AlertIOS.alert(
            'Search', 'You pressed the search button'
          )
        }}
      />
    );
  }
}

 


 

Implementing SearchBar


 

SearchBar
 var SearchBar = React.createClass({
  render: function(){
    return(
      <View style={styles.listView.searchBar}>
        <TextInput
        autoCapitalize="none"
        autoFocus={false}
        placeholder="Search for media iTunes ....."
        style={styles.listView.searchBarInput}
        returnKeyType="search"
        enablesReturnKeyAutomatically={true}
        onEndEditing={this.props.onSearch}
        />
      </View>
    );
  }
});

 


Using SearchBar


 

SearchBar Implementation
 <SearchBar
        onSearch={(event) => {
          var searchString = event.nativeEvent.text;
          AlertIOS.alert("Search String", searchString);
        }}
      />


 


Making api calls


 

Fetch api
_urlForQuery: function(query: string): string {
  if (query) {
    return API_URL + '?media=movie&term='+ encodeURIComponent(query);
  }else {
    return API_URL + '?media=movie&term=mission';
  }
},


fetch(this._urlForQuery(query),{
        method: 'get'
      }).then((response) => {
          return response.json()
      }).catch((error) => {
        console.log('catch the error: ' + error + '\n');
        resultsCache.dataForQuery[query] = undefined;
      }).then((responseData) => {
        console.log(responseData.results + ' \n');
        resultsCache.dataForQuery[query] = responseData.results;
        console.log(resultsCache.dataForQuery);
        AlertIOS.alert("Number of results", responseData.resultCount + ' results');
      })

 


 


ActivityIndicatorIOS


 

ActivityIndicatorIOS
  <ActivityIndicatorIOS
          animating={this.props.isLoading}
          style={styles.listView.spinner}
        />
 
<SearchBar
        isLoading = {this.state.isLoading}
        onSearch = {(event) => {
          var searchString = event.nativeEvent.text;
          this.clearTimeout(this.timeoutID);
          this.timeoutID = this.setTimeout(() => this.searchMedia(searchString), 250);
          //AlertIOS.alert("Search String", searchString);
        }}
      />

 

 

REACT-NATIVE-DEVICE-INFO


 

Device Info
var DeviceInfo = require('react-native-device-info');

console.log("Device Unique ID", DeviceInfo.getUniqueID());  // e.g. FCDBD8EF-62FC-4ECB-B2F5-92C9E79AC7F9

console.log("Device Manufacturer", DeviceInfo.getManufacturer());  // e.g. Apple

console.log("Device Model", DeviceInfo.getModel());  // e.g. iPhone

console.log("Device Name", DeviceInfo.getSystemName());  // e.g. iPhone OS

console.log("Device Version", DeviceInfo.getSystemVersion());  // e.g. 9.0

console.log("Bundle Id", DeviceInfo.getBundleId());  // e.g. com.learnium.mobile

console.log("Build Number", DeviceInfo.getBuildNumber());  // e.g. 89

console.log("App Version", DeviceInfo.getVersion());  // e.g. 1.1.0

console.log("App Version (Readable)", DeviceInfo.getReadableVersion());  // e.g. 1.1.

 

ListView


 


 

Sample 1

Listview
getInitialState: function() {
  var ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
  return {
    dataSource: ds.cloneWithRows(['row 1', 'row 2']),
  };
},

render: function() {
  return (
    <ListView
      dataSource={this.state.dataSource}
      renderRow={(rowData) => <Text>{rowData}</Text>}
    />
  );
},

 

 

Listview
getInitialState: function() {
  var ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
  return {
    dataSource: ds.cloneWithRows(['row 1', 'row 2']),
  };
},
renderTrack: function (item) {
    return (
      <Text>{item.title}</Text>
      );
  },
render: function() {
  return (
    <ListView
      dataSource={this.state.dataSource}
     renderRow={this.renderTrack}
    />
  );
},

 

 

 

 

 

  • No labels