Easy Steps: React Native Text, View, Button, Form, StatusBar, UI

React Native Text, View

import React, { Component } from 'react'
import { View, Text, Button } from 'react-native'
const books =[
{
id:1,
name:'Java Scripts'
},{
id:2,
name:'React Native'
},{
id:3,
name:'Node. js'
}
]
export default class App extends Component{
constructor(props){
super(props);
this.state ={
activeIndex:0
}
}

nextMethod=()=>{
const {activeIndex}= this.state
if(activeIndex < books.length -1){
this.setState({activeIndex: activeIndex +1})
}
else{
this.setState({activeIndex:0})
}
}
render(){
const data = books[this.state.activeIndex]

return(
<View style={{flex:1}}>

<Text style={{ fontSize:30}}>{data.id}.{data.name}</Text>

<View style={{ position:'absolute', bottom:30}}>

<Button title='Next' onPress={()=> this.nextMethod()}></Button>

</View>
</View>
)
}
}

....................................................................................................................................................................................................................................

....................................................................................................................................................................................................................................

....................................................................................................................................................................................................................................

Example : # 7
Heading.js

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

class Heading extends Component{
render(){
return(
<View style={styles.container}>
<Text style={styles.text}> PHOTOS</Text>
</View>
)
}
}
export default Heading

const styles = StyleSheet.create({
container:{
justifyContent:'center',
alignItems:'center',
borderBottomColor:'#ddd',
borderBottomWidth:5
},
text:{
fontSize:19,
fontWeight:'bold',
textAlign:'center',
margin:15
}

})

.........................................................................................................................................................................................................................................
PhotoList.js

import React, { Component } from 'react'
import { View, Text, StyleSheet, ScrollView , SafeAreaView} from 'react-native'
import PhotosSection from '../components/PhotosSection'
import datas from '../../data'
class PhotosList extends Component{
constructor(props){
super(props)
this.state={
datas:datas
}
}

getData=()=>{
return this.state.datas.map(d=>{
return <PhotosSection details={d} key={d.id}/>
})
}
render(){
return(
<ScrollView style={styles.container}>

{this.getData()}
</ScrollView>
)
}
}
export default PhotosList

const styles = StyleSheet.create({
container:{
flex:1,
}

})

.........................................................................................................................................................................................................................................
PhotoSections.js

import React, { Component } from 'react'
import { View, Text, StyleSheet, Image, TouchableWithoutFeedback } from 'react-native'
import Icon from 'react-native-vector-icons/Ionicons'

class PhotosSection extends Component {
constructor(props) {
super(props)
this.state = {
heartIcon: 'ios-heart-empty',
like: false
}
}
toggleLike = () => {
this.setState({
like: !this.state.like
})
if(this.state.like) {
this.setState({
heartIcon:'ios-heart'
})
}
else{
this.setState({
heartIcon:'ios-heart-empty'
})

}
}

render() {
return (
<View style={styles.container}>
<View style={styles.thumbnailSection}>
<Image source={{ uri: this.props.details.user_avatar}} style={styles.thumbnail} />
<Text style={styles.headerUsername}> {this.props.details.username}</Text>
</View>
<View>
<Image style={{ width: null, height: 250, borderRadius: 15 }} source={{ uri:this.props.details.image }} />
</View>
<View style={styles.heartContainer}>
<TouchableWithoutFeedback onPress={this.toggleLike}>
<Icon name={this.state.heartIcon} size={32} style={{color:this.state.heartIcon === 'ios-heart-empty' ? 'black' :'red'}} />
</TouchableWithoutFeedback>

</View>
<View style={styles.imageMeta}>
<Text style={styles.userName}>{this.props.details.username}</Text>
<Text>{this.props.details.caption}</Text>
</View>
</View>
)
}
}
export default PhotosSection

const styles = StyleSheet.create({
container: {
flex: 1,
margin: 10
},
thumbnailSection: {
flexDirection: 'row',
padding: 5,
alignItems: 'center'
},
thumbnail: {
width: 50,
height: 50,
borderRadius: 25
},
headerUsername: {
fontWeight: 'bold',
fontSize: 19,
marginLeft: 10
},
imageMeta: {
flexDirection: 'row'

},
userName: {
fontWeight: 'bold',
paddingRight: 10
},
heartContainer: {
paddingVertical: 10
}

})

.........................................................................................................................................................................................................................................

App.js

import React, { Component } from 'react'
import { View, Text, StyleSheet } from 'react-native'
import Heading from './src/components/Heading'

import PhotosList from './src/components/PhotosList'

class App extends Component {
render() {
return (
<View style={styles.container}>
<Heading/>
<PhotosList/>
</View>
)
}
}
export default App

const styles = StyleSheet.create({
container: {
flex:1,
backgroundColor:'#fff',

}
})
.......................................................................................................................................................................................................................................
data.js

let data

export default data = [
{
id:1,
username:"ML_Crusta",
user_avatar:"https://i.pravatar.cc/400?img=1",
image: "https://images.unsplash.com/photo-1553174241-0b28d763cafa?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80",
caption:"#holiday,#Roam "
},
{
id:2,
username:"Ever_Nes",
user_avatar:"https://i.pravatar.cc/400?img=2",
image: "https://images.unsplash.com/photo-1546596183-0aa5a36b03b9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80",
caption:"#nightglow,#motel "
},
{
id:3,
username:"Sweety1",
user_avatar:"https://i.pravatar.cc/400?img=3",
image: "https://images.unsplash.com/photo-1560748369-d05f480b43bf?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=634&q=80",
caption:"#GoodMorning,#seeme "
},
{
id:4,
username:"Jonny_124",
user_avatar:"https://i.pravatar.cc/400?img=4",
image: "https://images.unsplash.com/photo-1503185912284-5271ff81b9a8?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=634&q=80",
caption:"#photoshoot, "
},
{
id:5,
username:"Angelina",
user_avatar:"https://i.pravatar.cc/400?img=5",
image: "https://images.unsplash.com/photo-1529626455594-4ff0802cfb7e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=634&q=80",
caption:"#beauty,#selfie "
}
]

.................................................................................................................................................................................................................................
display

..............................................................................................................................................................................................................................
Example: #10

import React, { Component } from 'react'
import { View, Text, StatusBar, TextInput, StyleSheet, Button, KeyboardAvoidingView, Platform, SafeAreaView, ScrollView } from 'react-native'

class Home extends Component {
render() {
return (
<SafeAreaView style={{flexGrow:1}}>
<ScrollView style={{flexGrow:1}}>

<KeyboardAvoidingView behavior={Platform.OS =='ios' ? "padding":'padding'} enabled style={{flexGrow:1}}>
{/* <KeyboardAvoidingView behavior={Platform.OS =='ios' ? "padding":'height'} enabled style={{flexGrow:1}}> */}
<View>
<Text> --Login --</Text>
<TextInput style={styles.textInput}
placeholder='Username'
placeholderTextColor='#000'
/>
<TextInput style={styles.textInput}
placeholder='Email'
placeholderTextColor='#000'
/>
<TextInput style={styles.textInput}
placeholder='Email'
placeholderTextColor='#000'
/>
<TextInput style={styles.textInput}
placeholder='Email'
placeholderTextColor='#000'
/>
<TextInput style={styles.textInput}
placeholder='Email'
placeholderTextColor='#000'
/>
<TextInput style={styles.textInput}
placeholder='Email'
placeholderTextColor='#000'
/>
<TextInput style={styles.textInput}
placeholder='Email'
placeholderTextColor='#000'
/>
<TextInput style={styles.textInput}
placeholder='password'
placeholderTextColor='#000'
/>
<View style={styles.btn}>
<Button title='Submit' color='green'></Button>
</View>
</View>
</KeyboardAvoidingView>
</ScrollView>
</SafeAreaView>
)
}
}

class App extends Component {
render() {
return (
<View style={styles.container}>
<StatusBar barStyle='light-content' backgroundColor='red' />
<Home/>
</View>
)
}
}

export default App

const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent:'center',
alignContent:'center',
paddingLeft:40,
paddingRight:40

},
textInput: {
borderBottomWidth: 2,
borderBottomColor: 'red'
},
btn:{
paddingTop:20
}

})

..............................................................................................................................................................................................................................
Example: #11

LoginPage.js

import React, { Component } from 'react'
import { View, TextInput, TouchableOpacity, Button, Text, StyleSheet } from 'react-native'

class LoginPage extends Component {
render() {
return (
<View style={styles.container}>
<View style={styles.textfields}>

<TextInput style={styles.input}
placeholder='username'
returnKeyType='next'
keyboardType='email-address'
autoCorrect={false}
autoCapitalize='none'
onSubmitEditing={() => this.passwordInput.focus()}
/>

<TextInput style={styles.input}
secureTextEntry
placeholder='password'
returnKeyType='next'
ref={(input) => this.passwordInput = input}
/>

<TouchableOpacity style={styles.buttonContainer}
onPress={() => this.props.navigation.navigate('Home')}>
<Text style={styles.buttontext}>Login</Text>
</TouchableOpacity>
<Text style={styles.text} onPress={() => this.props.navigation.navigate('Register')}>Register Here</Text>
</View>
</View>
)
}
}
export default LoginPage

const styles = StyleSheet.create({
container: {
padding: 20,
justifyContent: 'center',
alignItems: 'stretch',
backgroundColor: '#ecf0f1',
flex: 1
},
input: {
paddingLeft: 20,
borderRadius: 50,
height: 50,
fontSize: 20,
backgroundColor: 'white',
borderWidth: 1,
borderColor: '#1abc9c',
marginBottom: 20,
color: '#34495e'

},
buttonContainer: {
height: 50,
borderRadius: 50,
backgroundColor: '#1abc9c',
paddingVertical: 10,
justifyContent: 'center'

},
buttontext: {
textAlign: 'center',
color: '#ecf0f1',
fontSize: 20
},
text:{
color: '#1abc9c',
textAlign:'center',
fontSize: 20

}

})

..............................................................................................................................................................................................................

Register.js

import React, { Component } from 'react'
import { View, TextInput, TouchableOpacity, Button, Text, StyleSheet } from 'react-native'

class RegisterPage extends Component {
render() {
return (
<View style={styles.container}>
<View style={styles.textfields}>
<TextInput style={styles.input}
placeholder='Enter your name'
returnKeyType='next'
onSubmitEditing={() => this.emailInput.focus()}
/>
<TextInput style={styles.input}
placeholder='Enter your email'
returnKeyType='next'
autoCapitalize='none'
keyboardType="email-address"
autoCorrect={false}
onSubmitEditing={() => this.passwordInput.focus()}
ref={(input)=> this.emailInput=input}
/>
<TextInput style={styles.input}
placeholder='Enter your password'
returnKeyType='go'
secureTextEntry
ref={(input) => this.passwordInput = input}
/>

<TouchableOpacity style={styles.buttonContainer}
onPress={() => this.props.navigation.navigate('Login')}>
<Text style={styles.buttontext}>Sign Up</Text>

</TouchableOpacity>

</View>
</View>
)
}
}
export default RegisterPage

const styles = StyleSheet.create({
container: {
padding: 20,
justifyContent: 'center',
alignItems: 'stretch',
backgroundColor: '#ecf0f1',
flex: 1
},
input: {
paddingLeft: 20,
borderRadius: 50,
height: 50,
fontSize: 20,
backgroundColor: 'white',
borderWidth: 1,
borderColor: '#1abc9c',
marginBottom: 20,
color: '#34495e'

},
buttonContainer: {
height: 50,
borderRadius: 50,
backgroundColor: '#1abc9c',
paddingVertical: 10,
justifyContent: 'center'

},
buttontext: {
textAlign: 'center',
color: '#ecf0f1'
}
})

..........................................................................................................................................................................................................................
Home.js
import React, { Component } from 'react'
import { View, Text } from 'react-native'

class Home extends Component{
render(){
return(
<View>
<Text> WelCome page!</Text>
</View>
)
}
}
export default Home
..............................................................................................................................................................................................................................
App.js

import React, { Component, Fragment } from 'react'
import { View, Text, StyleSheet, StatusBar, Button } from 'react-native'
import { createAppContainer } from 'react-navigation'
import { createStackNavigator } from 'react-navigation-stack'

import LoginScreen from './src/components/LoginScreen'
import RegisterPage from './src/components/Register'
import Home from './src/components/Home'

const StackNavigator = createStackNavigator({
Login: { screen: LoginScreen },
Register: { screen: RegisterPage },
Home:{ screen:Home}
})
const AppContainer = createAppContainer(StackNavigator)

class App extends Component {
render() {
return (
<AppContainer />
)
}
}
export default App

Note - barStyle means text color will be changed

Example: #19 [Shadow]

import React, { Component } from 'react'

import { View, Text, StyleSheet, Dimensions } from 'react-native'

const { width, height}= Dimensions.get('window')

class App extends Component {

render() {

return (

<Text style={{ fontSize: 40 }}> Hello... </Text>

</View>

)

}

export default App

const styles = StyleSheet.create({

container: {

flex: 1,

marginTop:30,

box: {

borderRadius: 10,

backgroundColor: '#fff'

shadows:{

elevation:10,

shadowOpacity: 2.3,

shadowRadius: 50,

shadowColor: 'red',

shadowOffset: { height: 10, width: 10 },

}

})

Shadow generator

https://ethercreative.github.io/react-native-shadow-generator/

Example: #20 [Style ]

How do I hide the back arrow?

Solution:- Use headerLeft and set it to null

headerLeft: null

defaultNavigationOptions: {


headerLeft:null,
}

navigationOptions:

headerLeft:null

}

What if I do not want to show a header for some screens?

Solution: Set header to null

headerMode: 'none',

header: null

How do I add icons to my bottom navbar?

Solution: Use navigationOptions object tabBarIcon property.

import Icon from 'react-native-vector-icons/Ionicons'

const TabStack =createBottomTabNavigator({

Routes

},{

defaultNavigationOptions: ({ navigation }) => {

// navigationOptions: ({ navigation }) => {      

tabBarIcon: ({ focused, tintColor }) => {

return <Icon  focused={focused} name='md-menu' />      

}

}

}

headerStyle: {

backgroundColor: 'black',

borderWidth: 1,

borderBottomColor: 'white'

}

headerTitleStyle: {

fontWeight: "bold",

color: "#fff",

zIndex: 1,

fontSize: 18,

lineHeight: 23,

fontFamily: "CircularStd-Bold"

}

How do I hide the back arrow?

Solution:- Use headerLeft and set it to null

headerLeft: null

code:-

defaultNavigationOptions: {

headerLeft:null

}

How do I hide the bottom tab bar for some detailed screens

which are sub screen’s of a parent tab?

code: -

<TouchableOpacity onPress={()=> this.props.navigation.navigate('OTP', {

hideTabBar: true 

            })}>

Inside navigationOptions of your createBottomTabNavigator

defaultNavigationOptions: ({ navigation }) => {

const { routes } = navigation.state;

let params = routes && routes[1] && routes[1].params;

return {

tabBarVisible:

params && params.hideTabBar != null ? !params.hideTabBar : true,

swipeEnabled:

params && params.hideTabBar != null ? !params.hideTabBar : true

}

}

Calling Custom Component

import React, { Component } from 'react'
import { View, Text, TouchableOpacity } from 'react-native'
import { createStackNavigator, createDrawerNavigator, createAppContainer } from 'react-navigation'
class Home extends Component {
static navigationOptions={
headerLeft:null,

}
render() {
return (
<View>
<Text>
Home Screen
</Text>
</View>
)
}
}

class Settings extends Component {
render() {
return (
<View>
<Text> Settings Screen </Text>
</View>
)
}
}
const About =()=>{
return(
<View>
<Text> About Screen </Text>
</View>
)
}

const Stack = createStackNavigator({
Home: {
screen: Home,

},
Settings: {
screen: Settings
},
About:{
screen: About
}
},{initialRouteName:'About',

defaultNavigationOptions:({navigation})=>({
headerRight:<TouchableOpacity onPress={()=> navigation.push('Home')}>
<Text>Home</Text>
</TouchableOpacity>,
headerStyle:{
backgroundColor:'grey'
}
})
})
const AppContainer = createAppContainer(Stack)
export default class extends Component {
render() {
return (
<AppContainer />
)
}

}

Happy Coding :)
...............................................................................................................................................................................................................................

BackgroundColor + Text enter

import React, { Component } from 'react'

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

class App extends Component {

render() {

return (

<Text> Hello</Text>

</View>

)

}

export default App

const styles = StyleSheet.create({

container: {

flex: 1,

justifyContent:'center',

alignItems:'center',

backgroundColor:'#3e3f8f'

}

})

import React, { Component } from 'react';

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

import Icon from 'react-native-vector-icons/FontAwesome';

class LogInScreen extends Component {

render() {

return (

<View>

<Text style={{ color: '#fff', fontSize: 22, marginBottom: 10 }}>Code With Sapan</Text>

</View>

</View>

<TextInput

style={{

backgroundColor: '#fff',

color: '#000',

width: 300,

height: 40,

paddingTop: 5,

paddingLeft: 10,

paddingBottom: 5,

paddingRight: 10

}}

placeholder='Your Email Address'

</View>

</View>

<TextInput

style={{

backgroundColor: '#fff',

color: '#000',

width: 300,

height: 40,

paddingTop: 5,

paddingLeft: 10,

paddingBottom: 5,

paddingRight: 10

}}

placeholder='Your Password'

</View>

<Text style={{

backgroundColor: '#12132b',

color: '#fff',

fontSize: 16,

padding: 5,

width: 110,

height: 35,

textAlign: 'center',

marginRight: 20

}}> Register</Text>

</TouchableOpacity>

<Text style={{

backgroundColor: '#fff',

color: '#3e3f8f',

fontSize: 16,

padding: 5,

width: 110,

height: 35,

textAlign: 'center'

}}> Sign In</Text>

</TouchableOpacity>

</View>

);

}

export default LogInScreen

const styles = StyleSheet.create({

container: {

flex: 1,

justifyContent: 'center',

alignItems: 'center',

backgroundColor: '#3e3f8f'

logincontainer: {

padding: 5,

height: 90.8,

backgroundColor: '#fff',

marginBottom: 10

inputbar: {

flex: 1,

flexDirection: 'row',

justifyContent: 'space-between'

seprator: {

borderBottomWidth: 0.8,

borderBottomColor: '#ebebeb',

marginBottom: 5,

marginTop: 5

}

});

StatusBar

import React from 'react'

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

const App = () => {

return (

<View>

</StatusBar>

<Text> Hello </Text>

</View>

)

}

export default App

Tips dark : - content gives only white color battery or something.

import React from 'react'

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

const App = () => {

return (

<View>

</StatusBar>

<Text> Hello </Text>

</View>

)

}

export default App

Tips dark : - content gives only black color battery or something

import React, { Component, useState } from 'react'

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

import Icon from 'react-native-vector-icons/FontAwesome'

import { createAppContainer, withNavigation, NavigationEvents } from 'react-navigation'

import { createStackNavigator } from 'react-navigation-stack'

const HeaderRightMenu = withNavigation(({ navigation }) => {

const [language, setLanguage] = useState('java')

return (

<View style={{

flexDirection: 'row',

justifyContent: 'flex-end',

alignItems: 'center'

}}>

<Picker

selectedValue={language}

style={{ width: '100%', backgroundColor: 'transparent', marginHorizontal: 13, }}

onValueChange={(itemValue, itemIndex) => {

setLanguage(itemValue);

navigation.navigate('Profile')

navigation.navigate('Setting')

}}

<Picker.Item label="Java" value="java" />

<Picker.Item label="JavaScript" value="js" />

<Picker.Item label="Node.js" value="nj" />

<Picker.Item label="Express" value="es" />

</Picker>

</View>

)

}

)

class Home extends Component {

render() {

return (

<View>

</View>

)

}

class Profile extends Component {

render() {

return (

<View >

<Text> Profile</Text>

</View>

)

}

class Setting extends Component {

render() {

return (

<View >

<Text> Setting</Text>

</View>

)

}

const Stack = createStackNavigator({

Home: {

screen: Home,

navigationOptions: ({ navigation }) => ({

title: 'Home',

headerRight: <HeaderRightMenu />

})

Profile: {

screen: Profile,

navigationOptions: ({ navigation }) => ({

title: 'Profile',

})

Setting: {

screen: Setting,

navigationOptions: ({ navigation }) => ({

title: 'Setting',

})

}

{

headerLayoutPreset: 'center'

})

const AppContainer = createAppContainer(Stack)

class App extends Component {

render() {

return (

)

}

export default App

Picker

import React, { Component } from 'react';

import { View, Text, Picker, StyleSheet } from 'react-native'

class PickerExample extends Component {

state = {user: ''}

updateUser = (user) => {

this.setState({ user: user })

}

render() {

return (

<View>

<Picker.Item label = "Steve" value = "steve" />

<Picker.Item label = "Ellen" value = "ellen" />

<Picker.Item label = "Maria" value = "maria" />

</Picker>

<Text style = {styles.text}>{this.state.user}</Text>

</View>

)

}

const App = () => {

return (

)

}

export default App

const styles = StyleSheet.create({

text: {

fontSize: 30,

alignSelf: 'center',

color: 'red'

}

})

Back Button

import React, { Component } from 'react'

import { View, Text, BackHandler, Button, Alert } from 'react-native'

import { createAppContainer } from 'react-navigation'

import { createStackNavigator } from 'react-navigation-stack'

class Home extends Component {

static navigationOptions = {

title: 'Home'

}

render() {

return (

<View>

<View>

<Button title='Go to Profile' onPress={() => this.props.navigation.navigate('Profile')}></Button>

</View>

)

}

class Profile extends Component {

static navigationOptions = {

title: 'Profile',

headerLeft: null // no more available back arrow on the left corner

}

componentWillMount() {

this.back_Button()

BackHandler.addEventListener('hardwareBackPress', () => {

return true

})

}

componentWillUnmount() {

this.back_Button()

BackHandler.removeEventListener('hardwareBackPress', () => {

return true

})

}

back_Button = () => {

Alert.alert(

'Exit From App',

'Do you want to exit From App ?',

[

{ text: 'YES', onPress: () => BackHandler.exitApp() },

{ text: 'NO', onPress: () => console.log('no pressed') }

{ cancelable: false },

);

}

render() {

return (

<View>

<Text> Profile </Text>

</View>

)

}

const HomeStack = createStackNavigator({

Home: Home,

Profile: Profile

}, {

headerLayoutPreset: 'center',

headerMode: 'float'

}

)

const AppContainer = createAppContainer(HomeStack)

class App extends Component {

render() {

return (

</>

)

}

export default App

React Native Picker

import React, { Component } from 'react'

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

class App extends Component {

constructor(props) {

super(props)

this.state = {

selectedLabel: ''

}

Show = (value) => {

this.setState({ selectedLabel: value })

}

render() {

return (

<View>

<Text> Hello World!</Text>

<Picker.Item label="Select a Course" value="0" color='red' />

<Picker.Item label="React" value="5000" />

<Picker.Item label="PHP" value="1000" />

<Picker.Item label="Java" value="8000" />

<Picker.Item label=".Net" value="9000" />

</Picker>

</View>

)

}

export default App

Get Value of TextInput Component in React Native

import React, { Component } from 'react'

import { View, Text, TextInput, Button } from 'react-native'

class App extends Component {

constructor(props) {

super(props)

this.state = {

number: ''

}

Display = () => {

var N1 = this.state.number

alert(N1)

}

render() {

return (

<View>

<Text> Hello World!</Text>

<TextInput onChangeText={number => this.setState({ number })} />

</View>

)

}

export default App

import React, { Component } from 'react'

import { View, Text, TextInput, Button } from 'react-native'

class App extends Component {

constructor(props) {

super(props)

this.state = {

number: ''

}

Display = () => {

var N1 = this.state.number

alert(N1)

}

render() {

return (

<View>

<Text> Hello World!</Text>

</View>

)

}

export default App

LetterSpacing and Line Height

import React, { Component } from 'react'

import { View, Text, TextInput, Button } from 'react-native'

class App extends Component {

render() {

return (

<View>

<Text style={{letterSpacing: 20}}> Hello World!</Text>

<Text style={{lineHeight: 100}}> Hello World!</Text>

</View>

)

}

export default App

...................................................................................................

..............................................................................................................................
MAP
export const App = () => {
const data = {
cars: {
Nissan: [
{
model: 'Sentra',
doors: 4,
},
{
model: 'Maxima',
doors: 4,
},
{
model: 'Skyline',
doors: 2,
},
],
Ford: [
{
model: 'Taurus',
doors: 4,
},
{
model: 'Escort',
doors: 4,
},
],
},
};

const brands = Object.keys(data.cars);

return brands.map(brand => (
<View style={{padding: 20}}>
<Text style={{fontWeight: '700'}}> {brand} :</Text>

{data.cars[brand].map(model => (
<View style={{marginBottom: 10}}>
<Text> Model : {model.model}</Text>
<Text> Doors : {model.doors}</Text>
</View>
))}
</View>
));
};

import React, { Component } from 'react'

import { View, Text, ImageBackground, StyleSheet, ScrollView } from 'react-native'

import Home from './src/assets/components/Home'

class App extends Component {

render() {

return (

<ImageBackground

source={require('./src/assets/bg.jpg')}

style={styles.container}>

< View style={styles.overlayContainer}>

</View>

</View>

</ImageBackground>

)

}

export default App

const styles = StyleSheet.create({

container: {

flex: 1,

width: '100%',

height: '100%'

overlayContainer: {

flex: 1,

backgroundColor: 'rgba(47, 163, 218, .3)'

top: {

height: '50%',

justifyContent: 'center',

alignItems: 'center'

header: {

color: '#fff',

fontSize: 28,

borderColor: '#fff',

borderWidth: 2,

padding: 20,

paddingLeft: 40,

paddingRight: 40,

backgroundColor: 'rgba(255,255,255,.1)'

menuContainer: {

height: '40%',

flexDirection: 'row',

flexWrap: 'wrap'

}

})

....

Home.js

import React, { Component } from 'react'

import { View, Text, StyleSheet, Image, ScrollView } from 'react-native'

class Home extends Component {

render() {

return (

<Image source={this.props.itemImage}

style={styles.img}

</View>

)

}

export default Home

const styles = StyleSheet.create({

container: {

width: '33.3333%',

height: '50%',

padding: 20,

img: {

width: '100%',

height: '100%',

opacity: 0.8,

borderColor: '#fff',

borderWidth: 3

}

})

Border Radius Rounded

import React, { Component} from 'react'

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

class App extends Component{

render(){

return(

<TouchableOpacity

style = {{

borderRadius: Math.round(Dimensions.get('window').width + Dimensions.get('window').height) / 2,

width: Dimensions.get('window').width * 0.9,

height: Dimensions.get('window').width * 0.9,

backgroundColor:'#f00',

justifyContent: 'center',

alignItems: 'center'

}}>

</TouchableOpacity>

)

}

export default App

PIXEL

import React from 'react'

import { View, Text, Platform, PixelRatio, Dimensions } from 'react-native'

const { width: SCREEN_WIDTH, height: SCREEN_HEIGHT } = Dimensions.get('window')

//iPhone 6s width 375 for

const scale = SCREEN_WIDTH / 375

function normalize(size) {

const newSize = size * scale

if (Platform.OS == "ios") {

return Math.round(PixelRatio.roundToNearestPixel(newSize))

} else {

return Math.round(PixelRatio.roundToNearestPixel(newSize)) - 2

}

const Home = ({ navigation }) => {

return (

<View>

<Text style={{ fontFamily: 'open-sans-bold', fontSize: normalize(22) }}> INDIARESULTS</Text>

</View>

)

}

export default Home

First of all navigate to YourProject > android > app > src > main > res and create a folder named xml. Inside xml folder create a xml file named network_security_config.xml . Now copy paste the code given below to the file.

<?xml version="1.0" encoding="utf-8"?>
<network-security-config>
<base-config cleartextTrafficPermitted="true">
<trust-anchors> <certificates src="system" />
</trust-anchors>
</base-config>
</network-security-config>

The code given above allows all http requests. Now, refer the created xml file to Android Manifest file which is placed at YourProject > android > app > src > main > AndroidManifest.xml and add android:networkSecurityConfig property as given below.

<?xml version="1.0" encoding="utf-8"?>
<manifest ... >
<application android:networkSecurityConfig="@xml/network_security_config"
... >
...
</application>
</manifest>

https://developer.android.com/training/articles/security-config

react-native-raw-bottom-sheet

NEWS Project

import React from 'react'

import { View, StyleSheet, Text, Image, Dimensions } from 'react-native'

const { width, height } = Dimensions.get('window')

const Home = ({item }) => {

return (

<Text style={styles.title}> {item.title}</Text>

<Text style={styles.author}>{item.author} </Text>

<Text style={styles.description}>{item.description}</Text>

</View>

)

}

const styles = StyleSheet.create({

cardView: {

backgroundColor: 'white',

margin: width * 0.03,

borderRadius: width * 0.05,

shadowColor: '#000',

shadowOffset: { width:0.5, height: 0.5 },

shadowOpacity: 0.5,

shadowRadius: 3,

elevation:10

title: {

marginHorizontal: width * 0.05,

marginVertical: width * 0.03,

color: 'black',

fontSize: 20,

fontWeight: 'bold'

description: {

marginVertical: width * 0.05,

marginHorizontal: width * 0.02,

color: 'gray',

fontSize: 18

image: {

height: height / 6,

marginLeft: width * 0.05,

marginRight: width * 0.05,

marginVertical: height * 0.02

author: {

marginBottom: width * 0.0,

marginHorizontal: width * 0.05,

fontSize: 15,

color: 'gray'

}

})

export default Home

...............................

Config/Api.js

import axios from 'axios'

export default axios.create({

baseURL:'https://newsapi.org/v2/'

})

...............................

App.js

import React, { useEffect, useState } from 'react'

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

import Home from './src/components/Home'

import Api from './src/configs/Api'

const Data = () => {

const [news, setNews] = useState([]);

useEffect(() => {

getNewsFromAPI()

}, [])

const getNewsFromAPI = async () => {

Api.get('top-headlines?country=us&apiKey=f5de4862c2e95aef')

.then(response => {

setNews(response.data);

})

.catch(error => {

console.log(error)

})

}

if (!news) {

return null

}

return (

<View>

<FlatList data={news.articles}

keyExtractor={(item, index) => 'key' + index}

renderItem={({ item }) => {

return <Home item={item} />

}}

</View>

)

}

const App = () => {

return (

</View>

)

}

export default App

const deviceWidth = Dimensions.get('window').width

const deviceHeight = Dimensions.get('window').height

const calcHeight = x => PixelRatio.roundToNearestPixel((deviceHeight * x) / 100)

const calcWidth = x => PixelRatio.roundToNearestPixel((deviceWidth * x) / 100)

<View>

</View>

</ScrollView>

How to rename the Package

Step: #1

react-native-rename

Installation

yarn global add react-native-rename

npm install react-native-rename -g

Tips

better to have back-up

Copy the two java files

android\app\src\main\java\com\normalpro

- Because the two java files willbe delete. so need to copy the java Files.

Example

react-native-rename "helloWorld"

In mycase project name is helloWorld.

Before

After

react-native-rename "helloWorld"

Now create a two Java File inside android\app\src\main\java\com\helloworld

1) MainActivity.java

2) MainApplication.java

Display a modal prompting for app exit

// packages

import {Alert} from 'react-native';

const exitAlert = () => {

Alert.alert(

'Confirm exit',

'Do you want to quit the app?'

[

{text: 'CANCEL', style: 'cancel'},

{text: 'OK', onPress: () => BackHandler.exitApp()}

]

);

};

export {exitAlert};

BACK BUTTON

import React, { useEffect } from 'react'

import { View, Text, Button, BackHandler } from 'react-native'

import { createAppContainer } from 'react-navigation'

import { createStackNavigator } from 'react-navigation-stack'

const Home = ({ navigation }) => {

return (

<Text> Home Screen </Text>

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

</>

)

}

const About = () => {

const handleBackButton = () => {

return true;

}

useEffect(() => {

BackHandler.addEventListener('hardwareBackPress', handleBackButton)

return () => BackHandler.removeEventListener('hardwareBackPress', handleBackButton)

}, [])

return (

<Text> About Screen </Text>

</>

)

}

const Stack = createStackNavigator({

Home,

About

})

const AppContainer = createAppContainer(Stack)

const App = () => {

return (

)

}

export default App

Custom Fonts in React Native | Add Google Fonts

Step :#1

create a two folder

assets

fonts

Step :#2

download fonts and Extract it, and past the inside assets/fonts folder

https://fonts.google.com/?selection.family=Sacramento

Step :#3
App.js
import React, { Component } from 'react'
import { View, Text } from 'react-native'
class App extends Component {
render() {
return (
<>
< Text style={{ fontFamily: 'LobsterTwo-BoldItalic', fontSize: 20 }}> Hello World</Text>
<Text style={{ fontSize: 20 }}> Hello World</Text>
<Text style={{ fontSize: 20, fontFamily: 'Sacramento-Regular' }}>Hello World</Text>
</>
)
}
}

export default App

react-native link
or
npx react-native link

run the project
npx react-native run-android

Common Error

"rnpm": {
"assets": [
"./assets/fonts/"
]
}
Step: #1
Adding the Assets
As a first step, create an assets folder in the root of your project. Then create a fonts folder inside it. Finally, copy your font files into the fonts folder.

Step : #2
react-native.config.js
Create a file in the root folder of your project called react-native.config.js, and add the following:

module.exports = {
assets: ['./assets/fonts/']
};

like that.

Then, run the following command in your terminal.
react-native link
You should be greeted with something similar to this.

Okay
Step : #3
This should take care of copying the assets and creating references for both iOS and Android.
On Android, it will copy the font files to /android/app/src/main/assets/fonts.

On iOS, it will modify your Info.plist file to include references to your fonts, similar to this.

<key>UIAppFonts</key>
<array>
<string>Ubuntu-Bold.ttf</string>
</array>

Step : #4

To reduce the risk of confusion, try to name your file the same way as it shows up in FontBook (macOS) when you double-click on it. Failing that, you can always use platform specific code, like this.

const styles = StyleSheet.create({

custom: {

fontFamily: Platform.OS === "ios" ? 'AsCalledByFontBook' : 'some_filename.ttf',

fontSize: 32

}

});

React Native [DOT ENV ]
Install

react-native-dotenv
yarn add react-native-dotenv

Folder Structure as below

Add one in side the babel.config.js

"module:react-native-dotenv"

....................................
.env
API_URL =https://example.com

.env

API_URL =https://localhost:3000

ANDROID_KEY=Android1234555555555

iOS_KEY =iOSKey123456789

................................

config.js

import { Platform } from 'react-native'

import { API_URL, ANDROID_KEY, iOS_KEY } from 'react-native-dotenv'

export default {

API_URL,

ANDROID_KEY,

iOS_KEY,

MAP_KEY:Platform.select({

ios: iOS_KEY,

android: ANDROID_KEY

})

}

....................................

App.js

import React from 'react'

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

import config from './src/config/config'

const App = () => {

return (

<Text> Hello World!</Text>

<Text>{config.API_URL}</Text>

<Text>{config.MAP_KEY}</Text>

</>

)

}

export default App

npm i react-native-timeline-flatlist

App.js

import React, { Component } from 'react';
import { View, Text, StyleSheet } from 'react-native';
import Timeline from 'react-native-timeline-flatlist';

export default class App extends Component {
constructor(props) {
super(props);
this.state = {
data:
[
{time: '09:00', title: 'BreakFast', description: 'I had breakfast from a wonderful restaurant and the food was super tasty.'},
{time: '11:00', title: 'Tea Break', description: 'I made a tea myself and drink it with a packet of biscuits.'},
{time: '13:00', title: 'Lunch', description: 'I ate lunch from nearby hotel but food was just okay.'},
{time: '16:00', title: 'Tea Break', description: 'Ate two snacks.'},
{time: '20:00', title: 'Dinner', description: 'This time I prepared dinner looking a youtube tutorial.'}
]

};
}

render() {
return (
<View style={styles.container}>
<Timeline
circleSize={20}
separator={true}
circleColor='blue'
lineColor='gray'
timeStyle={styles.time}
descriptionStyle={styles.description}
style={styles.list}
data={this.state.data}
/>
</View>
);
}
}

const styles = StyleSheet.create({
container: {
flex: 1,
padding: 20,
backgroundColor:'white'
},
list: {
flex: 1,
marginTop:20,
},
time: {
textAlign: 'center',
backgroundColor:'gray',
fontSize: 12,
color:'white',
padding:5,
borderRadius:13,
overflow: 'hidden'
},
description: {
color: 'gray'
}
});

react native netinfo

import React, { Component } from 'react'
import { View, Text, Button, Platform } from 'react-native'
import NetInfo from "@react-native-community/netinfo";

class App extends Component {
constructor(props) {
super(props)
}

CheckConnectivity = () => {
if (Platform.OS === 'android') {
NetInfo.fetch().then(isConnected => {
isConnected ? alert("You are online!") : alert("you are offline!");

});
} else {
NetInfo.addEventListener("connection change", this.handleFirstConnectivityChange)
}
}
handleFirstConnectivityChange = isConnected => {
NetInfo.removeEventListener('Connection Change', this.handleFirstConnectivityChange);
isConnected ? alert("you are online") : ("you are offline")

}
render() {
return (
<View>
<Text> Hello world</Text>
<Button title='Check' onPress={() => this.CheckConnectivity()} />
</View>
)
}
}
export default App

.................................................................................................................................................................................................................................

Easy Steps

Friday, December 14, 2018

React Native Text, View, Button, Form, StatusBar, UI

react-native-raw-bottom-sheet

No comments:

Post a Comment