Develop Reference

After implementing this auto suggestion text input in my react native app the value stored is only what was typed in not the suggestion after clicking

So I have tried to implement this code from user illusionist from another issue concerning auto filling text input with suggested text here in react native LINK: How to get suggestions while typing in text-input in react-native
this is how I implemented it >
import { Menu, TextInput } from "react-native-paper";
import React, { useState } from "react";
const Autocomplete = ({
value: origValue,
label,
data,
containerStyle,
onChange: origOnChange,
icon = 'bike',
style = {},
menuStyle = {},
right = () => {},
left = () => {},
}) => {
const [value, setValue] = useState(origValue);
const [menuVisible, setMenuVisible] = useState(false);
const [filteredData, setFilteredData] = useState([]);
const filterData = (text) => {
return data.filter(
(val) => val?.toLowerCase()?.indexOf(text?.toLowerCase()) > -1
);
};
return (
<View style={[containerStyle]}>
<TextInput
onFocus={() => {
if (value.length === 0) {
setMenuVisible(true);
}
}}
// onBlur={() => setMenuVisible(false)}
label={label}
right={right}
left={left}
style={style}
onChangeText={(text) => {
origOnChange(text);
if (text && text.length > 0) {
setFilteredData(filterData(text));
} else if (text && text.length === 0) {
setFilteredData(data);
}
setMenuVisible(true);
setValue(text);
}}
value={value}
/>
{menuVisible && filteredData && (
<View
style={{
flex: 1,
backgroundColor: 'white',
borderWidth: 2,
flexDirection: 'column',
borderColor: 'grey',
}}
>
{filteredData.map((datum, i) => (
<Menu.Item
key={i}
style={[{ width: '100%' }, menuStyle]}
icon={icon}
onPress={() => {
console.log(datum)
setValue(datum);
console.log(value)
setMenuVisible(false);
}}
title={datum}
/>
))}
</View>
)}
</View>
);
};
export default Autocomplete;
and in another page I import autocomplete and like here:
const [typZavady, setTypZavady] = useState('');
<Autocomplete
value={''}
style={[novaStyle.input]}
containerStyle={novaStyle.autocompleteContainer}
label="Typ závady"
data={['Svetla', 'Stoličky', 'Tabula', 'Projektor', 'Topenie', 'Počítače', 'Dvere', 'Iné']}
menuStyle={{backgroundColor: 'white'}}
onChange={newTyp => setTypZavady(newTyp)}
/>
However when I type and click on one of the suggested words only the part of the word I type in is stored in the const typZavady not the selected suggested word. I fiddled a bit with the code with no luck.

How to get variable react native

I'm using react native expo for the following project basically i want to retrive the selected item form an flat list and display it in a modal
import React,{ Component}from 'react';
import {View,Text,Image,StyleSheet,Modal,Button} from 'react-native';
import { FlatList, TouchableOpacity, ScrollView } from 'react-native-gesture-handler';
import Card from '../shared/card';
import { AppLoading } from 'expo';
import * as Font from 'expo-font';
export default class MealSearch extends Component{
constructor(props){
super(props)
this.state = {
loaded:false,
show:false,
key:''
}}
render(){
const meal= [ {title:'My hero Academia',img:{uri:'https://i.cdn.turner.com/adultswim/big/img/2018/05/10/MHA_Header.png'}, body:'Rating : 4.5/5' , id :'1'},
{title:'Naruto',img:{uri:'https://store-images.s-microsoft.com/image/apps.15041.71343510227343465.377174a9-abc8-4da3-aaa6-8874fdb9e2f5.00fc0a9e-295e-40ca-a391-58ed9f83e9a0?mode=scale&q=90&h=1080&w=1920&background=%23FFFFFF'}, body:'Rating : 5/5' , id :'2'},
{title:'Attack On Titan',img:{uri:'https://www.denofgeek.com/wp-content/uploads/2013/12/attack-on-titan-main.jpg?fit=640%2C380'}, body:'Rating : 4.5/5' , id :'3'},
{title:'Fate: Unlimited Blade Works',img:{uri:'https://derf9v1xhwwx1.cloudfront.net/image/upload/c_fill,q_60,h_750,w_1920/oth/FunimationStoreFront/2066564/Japanese/2066564_Japanese_ShowDetailHeaderDesktop_496a6d81-27db-e911-82a8-dd291e252010.jpg'}, body:'Rating : 4.5/5' , id :'4'}
]
const handlePress = (meal_data) =>{
this.setState({show: true});
this.setState({selectedMeal:meal_data});
console.log(meal_data)
}
return(
<View style={styles.view} >
<FlatList
keyExtractor={item => item.id}
data={meal}
renderItem={({item})=>(
<Card>
<TouchableOpacity onPress={(_item)=>{handlePress(item)}}>
<View style={styles.mealItem}>
<Image style={{width:300,height:150}} resizeMode={'contain'} source={item.img} marginLeft={30}/>
<View style={styles.descrip}>
<Text style={styles.rating}>{item.title}</Text>
<Text style={styles.name}>{item.body}</Text>
</View>
</View>
</TouchableOpacity>
</Card>
)}
/>
<Modal
transparent={true}
visible={this.state.show}
>
<View style={styles.modal}>
<View style={styles.inModal}>
<Button title='End' onPress={()=>{this.setState({show:false})}}/>
</View>
</View>
</Modal>
</View>
);}
}
this is the code I'm currently working on I want the 'meal_data' in 'handlePress' to be displayed inside my modal 'meal_data' is the selected item from the flat list .
<Modal
transparent={true}
visible={this.state.show}
>
<View style={styles.modal}>
<View style={styles.inModal}>
<Button title='End' onPress={()=>{this.setState({show:false})}}/>
</View>
</View>
</Modal>
I want to display it in here above the button

Change these lines of code:
Change: <TouchableOpacity onPress={(_item)=>{handlePress(item)}}>
To
<TouchableOpacity onPress={() => this.handlePress(item)}>
Delete this code inside render():
const handlePress = (meal_data) =>{
this.setState({show: true});
this.setState({selectedMeal:meal_data});
console.log(meal_data)
}
And put this code above render() medthod instead:
handlePress = (meal_data) =>{
this.setState({show: true, selectedMeal: meal_data});
console.log(meal_data)
}
Inside state
this.state = {
loaded:false,
show:false,
key:''
selectedMeal: null // Add this property
}}
After that, you'll be able to access selectedMeal inside your Modal.
Put this code inside the Modal (or somewhere else)
{this.state.selectedMeal && (
<View>
<Text>{this.state.selectedMeal.title}</Text>
</View>
)}

First of declare your handlePress outside of render method. Other thing is that this.setState() is Async so, first set you data then show the modal. Your final code should look like this :
import React, { Component } from 'react';
import { View, Text, Image, StyleSheet, Modal, Button } from 'react-native';
import { FlatList, TouchableOpacity, ScrollView } from 'react-native-gesture-handler';
import Card from '../shared/card';
import { AppLoading } from 'expo';
import * as Font from 'expo-font';
export default class MealSearch extends Component {
constructor(props) {
super(props)
this.state = {
loaded: false,
show: false,
key: ''
}
}
handlePress = (meal_data) => {
this.setState({ selectedMeal: meal_data }, () => {
this.setState({ show: true });
});
console.log(meal_data)
}
render() {
const meal = [
{ title: 'My hero Academia', img: { uri: 'https://i.cdn.turner.com/adultswim/big/img/2018/05/10/MHA_Header.png' }, body: 'Rating : 4.5/5', id: '1' },
{ title: 'Naruto', img: { uri: 'https://store-images.s-microsoft.com/image/apps.15041.71343510227343465.377174a9-abc8-4da3-aaa6-8874fdb9e2f5.00fc0a9e-295e-40ca-a391-58ed9f83e9a0?mode=scale&q=90&h=1080&w=1920&background=%23FFFFFF' }, body: 'Rating : 5/5', id: '2' },
{ title: 'Attack On Titan', img: { uri: 'https://www.denofgeek.com/wp-content/uploads/2013/12/attack-on-titan-main.jpg?fit=640%2C380' }, body: 'Rating : 4.5/5', id: '3' },
{ title: 'Fate: Unlimited Blade Works', img: { uri: 'https://derf9v1xhwwx1.cloudfront.net/image/upload/c_fill,q_60,h_750,w_1920/oth/FunimationStoreFront/2066564/Japanese/2066564_Japanese_ShowDetailHeaderDesktop_496a6d81-27db-e911-82a8-dd291e252010.jpg' }, body: 'Rating : 4.5/5', id: '4' }
]
return (
<View style={styles.view} >
<FlatList
keyExtractor={item => item.id}
data={meal}
renderItem={({ item }) => (
<Card>
<TouchableOpacity onPress={() => { this.handlePress(item) }}>
<View style={styles.mealItem}>
<Image style={{ width: 300, height: 150 }} resizeMode={'contain'} source={item.img} marginLeft={30} />
<View style={styles.descrip}>
<Text style={styles.rating}>{item.title}</Text>
<Text style={styles.name}>{item.body}</Text>
</View>
</View>
</TouchableOpacity>
</Card>
)}
/>
<Modal
transparent={true}
visible={this.state.show}
>
<View style={styles.modal}>
<View style={styles.inModal}>
<Button title='End' onPress={() => { this.setState({ show: false }) }} />
</View>
</View>
</Modal>
</View>
);
}
}

How to fix React Native Webview not showing element

I am developing an app in android using react-native. The problem is when I use WebView, it only works on some devices, mostly the ones with older OS on android.
I have tried using this code and modified it a bit. It worked on some phones, but the elements inside the webview doesn't show in my own phones.
It renders like this, while it should have rendered something like this
Here is the snippet of ListSoal.js that contains the code to the WebView
import React, { Component } from 'react'
import {
ScrollView,
TouchableOpacity,
Alert,
Image,
Modal,
Text,
BackHandler,
WebView,
AsyncStorage,
Dimensions,
Platform
} from 'react-native'
const injectedScript = function () {
function waitForBridge () {
if (window.postMessage.length !== 1) {
setTimeout(waitForBridge, 200)
} else {
let height = 0
if (document.documentElement.clientHeight > document.body.clientHeight) {
height = document.documentElement.clientHeight
} else {
height = document.body.clientHeight
}
}
window.postMessage(height)
}
waitForBridge()
}
export default class ListSoal
extends Component {
state = {
webViewHeight: Number,
webViewHeightAnswer: Number
}
static defaultProps = {
autoHeight: true,
autoHeightAnswer: true
}
constructor (props) {
super(props)
this.state = {
webViewHeight: this.props.defaultHeight,
webViewHeightAnswer: this.props.defaultHeight
}
this._onMessage = this._onMessage.bind(this)
this._onMessageAnswer = this._onMessageAnswer.bind(this)
}
_onMessage (e) {
this.setState({
webViewHeight: parseInt(e.nativeEvent.data)
})
}
_onMessageAnswer (e) {
this.setState({
webViewHeightAnswer: parseInt(e.nativeEvent.data)
})
}
render () {
const { loading } = this.state
if (loading === true) {
return <CommonIndicator color={'#eb6a16'} size={'large'} />
}
if (this.state.soals.length <= 0) {
return (
<View style={styles.notContent}>
<Text style={styles.textNull}>{strings.exercises.notExercises}</Text>
</View>
)
}
const _w = this.props.width || Dimensions.get('window').width - '5%'
const _wA = this.props.width || 265
const _h = this.props.autoHeight ? this.state.webViewHeight : this.props.defaultHeight
const _hA = this.props.autoHeightAnswer ? this.state.webViewHeightAnswer : this.props.defaultHeight
const { animate, soals, no, totalQuestion, displayNumber, selected } = this.state
return (
<View style={styles.mainContainer}>
<View style={styles.topButtonGroup}>
<View style={{flexDirection: 'row', width: '100%', justifyContent: 'space-between'}}>
<View style={{width: '50%'}}>
<TouchableOpacity
onPress={() => this.onNumberModal()}
style={styles.btnNumber}>
<Text style={styles.textbutton}>{strings.exercises.number}</Text>
</TouchableOpacity>
</View>
<View style={{width: '50%'}}>
{
loading === true
? null
: soals[no].question.solution_id === null
? <View
style={[styles.btnSale, {backgroundColor: '#dddddd'}]}>
<Text style={styles.textbutton}>{strings.exercises.solution}</Text>
</View>
: <TouchableOpacity
onPress={() => this.checkSolution()}
style={styles.btnSale}>
<Text style={styles.textbutton}>{strings.exercises.solution}</Text>
</TouchableOpacity>
}
</View>
</View>
<View style={{flex: 1}} />
</View>
<View style={styles.backgquestion}>
<ScrollView>
<View animation={animate} duration={1100} style={styles.listquestion}>
<View style={styles.modal}>
<Text style={styles.number}>Number: {displayNumber + 1}</Text>
</View>
{
soals[no].question.image === null ? null : <Image resizeMode={'stretch'} source={{uri: config.storageUrl + soals[no].question.image}} style={styles.imagequestion} />
}
<View style={styles.soals}>
<WebView
scalesPageToFit={Platform.OS !== 'ios'}
ref={(ref) => { this.webview = ref }}
injectedJavaScript={'(' + String(injectedScript) + ')();'}
scrollEnabled={this.props.scrollEnabled || false}
onMessage={this._onMessage}
javaScriptEnabled={true}
automaticallyAdjustContentInsets={true}
{...this.props}
source={{html: soals[no].question.question}}
style={[{width: _w}, this.props.style, {height: _h}]}
/>
</View>
I have tried changing flex properties many times, but it seems that the problem comes from height = document.body.clientHeight or height document.elementBody.clientHeight because when I changed it to an integer, it worked.
Any suggestions? Thanks in advance

Get row wise state inside flatlist in react native

I have a flatlist and inside flatlist I Have a radioform. I have 2 items of radioform 'P' and 'A' Here is the picture of that
Here I need to post the selected item.My Problem is if I select P then all row value is P when I post and if I select A all row value is A . I have a logic that I have to get the row id wise state get to post . Here so far I have code
export default class attendancetest extends Component {
constructor(props) {
super(props);
this.state = {
data: [],
rollno:"",
typeofattendance:1,
animating: true
};
}
componentWillMount() {
this.fetchData();
}
fetchData = async () => {
const response = await
fetch("http://192.168.1.208:8082/students/all");
const json = await response.json();
this.setState({ data: json });
};
closeActivityIndicator = () =>
setTimeout(
() =>
this.setState({
animating: false
}),
4000
);
componentDidMount = () => this.closeActivityIndicator();
render() {
const animating = this.state.animating;
return (
<View
style={--Style Code
}
>
<Logo />
<Text style={styles.titleText1}>
Test Section A Class 11th
</Text>
<ActivityIndicator
--Some Code
/>
<View style={styles.container}>
<Text style={styles.titleText}>Roll & Name Present Or Absent</Text>
</View>
<FlatList
data={this.state.data}
// rollno={this.state.data.rollno}
showsVerticalScrollIndicator={false}
renderItem={({ item,index }) => (
<View
style=--Style Code
>
<Text
style=--style code
>
{item.rollno}
--
{item.name}
</Text>
<RadioForm
animation={true}
buttonColor={"#C2E3A9"}
index={1}
formHorizontal={true}
labelHorizontal={true}
buttonStyle={{ marginRight: 20 }}
radioStyle={{ paddingRight: 20 }}
// labelHorizontal={false}
style={{
flex: 1,
paddingRight: 20,
flexDirection: "row",
width: 30
}}
radio_props={radio_props}
initial={this.state.typeofattendance}
// initial={value => {
// this.setState({ value: value });}}
isSelected = {true}
// radio_props
onPress={value => { index=
this.setState({ typeofattendance: value });
}}
ItemSeparatorComponent={this.renderSeparator}
/>
</View>
)}
// keyExtractor={(x, i) => i}
keyExtractor={(item, index) => index.toString()}
/>
<Button title="Submit" onPress={() => this.insert()} />
</View>
);
}
insert = () => {
var numstudent = this.state.data.length;
var datatest=[]
var data1;
for(var i=0;i<numstudent;i++){
data1={"rollno": this.state.data[i].rollno, "typeofattendence":
this.state.typeofattendance};
datatest.push(data1);
}
console.log(datatest);
}
}
Here this portion I can get P to A but not in particular row
</View>
onPress={value => {
this.setState({ typeofattendance: value });
}}
How to get row wise state get inside flatlist .
Here in these portion I check the radiobutton check item in button click
var numstudent = this.state.data.length;
var datatest=[]
var data1;
for(var i=0;i<numstudent;i++){
data1={"rollno": this.state.data[i].rollno, "typeofattendence": this.state.typeofattendance};
datatest.push(data1);
}
// console.log(datatest);

React-native : attempt Attempted to redefine property 'color'

This is my index.android.js , after navigate to login.js, it show the error.
How can i find where the error occur?
I run eslint , but no error result.
/**
* Sample React Native App
* https://github.com/facebook/react-native
*/
'use strict';
var React = require('react-native');
var {
AppRegistry,
Component,
Navigator,
} = React;
var Login = require('./Login');
class WOMGrocery extends Component {
constructor(props) {
super(props);
this.state = {isNavHidden: true};
}
render() {
return (
<React.Navigator
// style={styles.container}
initialRoute={{
title: 'WOMGrocery',
component: Login,
}}
navigationBarHidden={this.state.isNavHidden}
/>
);
}
}
AppRegistry.registerComponent('WOMGrocery', () => WOMGrocery);
i enclosed my login.js as well. I have no idea where the redefined 'color' come from.
'use strict';
var React = require('react-native');
var Home = require('./Home');
var RegisterStep1 = require('./RegisterStep1');
var Config = require('./Config');
var Modal = require('react-native-modalbox');
var {
StyleSheet,
View,
PixelRatio,
PushNotificationIOS,
NavigatorIOS,
AlertIOS,
Navigator,
Text,
TextInput,
Image,
TouchableHighlight,
Component
} = React;
var Button = React.createClass({
render: function() {
return (
<TouchableHighlight
underlayColor={'white'}
style={styles.button}
onPress={this.props.onPress}>
<Text style={styles.buttonLabel}>
{this.props.label}
</Text>
</TouchableHighlight>
);
}
});
class Login extends Component {
constructor(props) {
super(props);
this.state = {
// usernameString: '***#yahoo.com',
// passwordString: '***',
usernameString: '***#gmail.com',
passwordString: '***',
// usernameString: '***#gmail.com',
// passwordString: '***',
// usernameString: '',
// passwordString: '',
email_retrieve: '',
};
}
componentWillMount() {
PushNotificationIOS.addEventListener('notification', this._onNotification);
}
componentWillUnmount() {
PushNotificationIOS.removeEventListener('notification', this._onNotification);
}
_sendNotification() {
require('RCTDeviceEventEmitter').emit('remoteNotificationReceived', {
aps: {
alert: 'Sample notificationion',
badge: '+1',
sound: 'default',
category: 'REACT_NATIVE'
},
});
}
_onNotification(notification) {
AlertIOS.alert(
'Notification Received',
'Alert message: ' + notification.getMessage(),
[{
text: 'Dismiss',
onPress: null,
}]
);
}
openModal1(id) {
this.refs.modal1.open();
}
openModal2(id) {
this.refs.modal2.open();
}
openModal3(id) {
this.refs.modal3.open();
}
openModal4(id) {
this.refs.modal4.open();
}
openModal5(id) {
this.setState({isOpen: true});
}
openModal6(id) {
this.refs.modal6.open();
}
openModal7(id) {
this.refs.modal7.open();
}
closeModal3(id) {
this.refs.modal3.close();
}
closeModal4(id) {
this.refs.modal4.close();
}
closeModal5(id) {
this.setState({isOpen: false});
}
closeModal6(id) {
this.refs.modal6.close();
}
closeModal7(id) {
this.refs.modal7.close();
}
ForgotPwd() {
var fURL = Config.server + '/submitForgotPassword/' + this.state.email_retrieve + '/Grocery';
fetch(fURL)
.then((response) => response.json())
.then((responseText) => {
// console.log(responseText);
this.closeModal3.bind(this);
})
.catch((error) => {
console.warn("a:"+error);
alert(error);
});
}
Home() {
this.props.navigator.push({
title: 'Home',
component: Home,
passProps: {},
});
this.setState({
isNavHidden: false
});
}
RegisterStep1Page() {
this.props.navigator.push({
title: 'Results',
component: RegisterStep1,
passProps: {},
});
}
onEmailRetrieveChanged(event) {
this.setState({ email_retrieve: event.nativeEvent.text });
}
onUsernameTextChanged(event) {
this.setState({ usernameString: event.nativeEvent.text });
}
onPasswordTextChanged(event) {
this.setState({ passwordString: event.nativeEvent.text });
}
onHomePressed() {
var uStr = this.state.usernameString;
var pStr = this.state.passwordString;
if (uStr.length>1) {
if (pStr.length>1) {
this._executeHome();
} else {
this.openModal7();
}
} else {
this.openModal6();
}
}
_handleHomeResponse(responseText, cCode) {
this.props.navigator.push({
title: 'Home',
component: Home,
passProps: {
listings: responseText,
cCode: cCode,
}
});
}
_executeHome() {
var fURL = Config.server + '/login/' + this.state.usernameString + '/' + this.state.passwordString + '/Grocery';
fetch(fURL)
.then((response) => response.json())
.then((responseText) => {
if (responseText.myArrayList[0].myHashMap.StatusCode=="200") {
var cCode = responseText.myArrayList[0].myHashMap.Code;
var fURL2 = Config.server + '/getCustomerCart/' + cCode;
fetch(fURL2)
.then((response) => response.json())
.then((responseText) => {
var arr_length = +responseText.myArrayList.length - 1;
this._handleHomeResponse(responseText.myArrayList[arr_length].myArrayList[0], cCode);
})
.catch((error) => {
console.warn(error);
});
} else {
this.openModal4();
// alert("Incorrect username or password");
}
})
.catch((error) => {
console.warn("a:"+error);
alert(error);
});
}
render() {
return (
<View style={styles.container}>
<View style={styles.imageContainer}>
<Image source={require('image!fruit')} style={styles.fruit} />
</View>
<View style={styles.imageLogo2}>
<Image resizeMode="contain" source={require('image!logo2')} style={styles.logo2} />
</View>
<View style={styles.imageLogo3}>
<Image resizeMode="contain" source={require('image!logo3')} style={styles.logo3} />
</View>
<Button
style={styles.btn2}
onPress={this._sendNotification}
/>
<Image resizeMode="contain" source={require('image!register_at2')} style={styles.register_at2} />
<Image resizeMode="contain" source={require('image!register_pw2')} style={styles.register_pw2} />
<TextInput style={styles.inputText_email} placeholder=' Email' placeholderTextColor='white' onChange={this.onUsernameTextChanged.bind(this)}/>
<View style={styles.thinLine}></View>
<View style={styles.thinLine2}></View>
<TextInput style={styles.inputText_password} placeholder=' Password' placeholderTextColor='white' onChange={this.onPasswordTextChanged.bind(this)} secureTextEntry={true} />
<Text style={styles.copyrightStyle}>
Copyright (C) 2016 www.ocmeritmall.com
</Text>
<TouchableHighlight style={styles.buttonRegister} onPress={this.RegisterStep1Page.bind(this)} underlayColor='transprance'>
<Text style={styles.buttonText2}>New here? Create an account ></Text>
</TouchableHighlight>
<TouchableHighlight style={styles.buttonLogin} onPress={this.onHomePressed.bind(this)} underlayColor='transprance'>
<Image resizeMode="contain" source={require('image!member_login')} style={styles.member_login} />
</TouchableHighlight>
<Text style={styles.instructions}>
All rights reserved (version 1.2.19)
</Text>
<TouchableHighlight style={styles.buttonForgetPwd} underlayColor='transprance' onPress={this.openModal3.bind(this)}>
<Text style={styles.buttonText}>Cannot access your account? ></Text>
</TouchableHighlight>
<Modal style={[styles.modal, styles.modal1]} ref={"modal1"} onClosed={this.onClose} onOpened={this.onOpen} onClosingState={this.onClosingState}>
<Text style={styles.text}>You are not in the latest app version</Text>
<Text style={styles.text2}>Press OK to download the latest app version</Text>
</Modal>
<Modal style={[styles.modal, styles.modal1]} ref={"modal2"} onClosed={this.onClose} onOpened={this.onOpen} onClosingState={this.onClosingState}>
<Text style={styles.text}>Whoops! You Have No Internet</Text>
<Text style={styles.text2}>Please check your network setting</Text>
</Modal>
<Modal style={[styles.modal, styles.modal1]} ref={"modal3"} onClosed={this.onClose} onOpened={this.onOpen} onClosingState={this.onClosingState}>
<Text style={styles.text3}>Please Key In Your Registered Email</Text>
<TextInput style={styles.inputText_email_retrieve} placeholder=' Registered Email Address' onChange={this.onEmailRetrieveChanged.bind(this)} />
<TouchableHighlight style={styles.wrapperButtonOk} underlayColor='#FFAB0A' onPress={this.ForgotPwd.bind(this)}>
<Image source={require('image!buttonOk')} style={styles.buttonOk} />
</TouchableHighlight>
<TouchableHighlight style={styles.wrapperButtonCancel} underlayColor='#FFAB0A' onPress={this.closeModal3.bind(this)}>
<Image resizeMode="contain" source={require('image!buttonCancel')} style={styles.buttonCancel} />
</TouchableHighlight>
</Modal>
<Modal style={[styles.modal, styles.modal1]} ref={"modal4"} onClosed={this.onClose} onOpened={this.onOpen} onClosingState={this.onClosingState}>
<Text style={styles.text}>Incorrect username or password!</Text>
<Text style={styles.text2}>No space bar allow in enter login</Text>
<View style={styles.imagePassword}>
<Image source={require('image!pop_password')} style={styles.pop_password} />
</View>
<TouchableHighlight style={styles.wrapperButtonOk} underlayColor='#FFAB0A' onPress={this.closeModal4.bind(this)}>
<Image source={require('image!buttonOk')} style={styles.buttonOk} />
</TouchableHighlight>
<TouchableHighlight style={styles.wrapperButtonCancel} underlayColor='transprance' onPress={this.closeModal4.bind(this)}>
<Image resizeMode="contain" source={require('image!buttonCancel')} style={styles.buttonCancel} />
</TouchableHighlight>
</Modal>
<Modal isOpen={this.state.isOpen} onClosed={this.closeModal5} style={[styles.modal, styles.modal4]} position={"center"}>
<Text style={styles.text}>Modal with backdrop content</Text>
</Modal>
<Modal style={[styles.modal, styles.modal1]} ref={"modal6"} onClosed={this.onClose} onOpened={this.onOpen} onClosingState={this.onClosingState}>
<Text style={styles.text}>Login Email Cannot Be Empty!</Text>
<Text style={styles.text2}>Please re-enter your login email</Text>
<View style={styles.imageEpassword}>
<Image source={require('image!pop_epassword')} style={styles.pop_epassword} />
</View>
<TouchableHighlight style={styles.wrapperButtonCancel} underlayColor='transprance' onPress={this.closeModal6.bind(this)}>
<Image resizeMode="contain" source={require('image!buttonCancel')} style={styles.buttonCancel} />
</TouchableHighlight>
<TouchableHighlight style={styles.wrapperButtonOk} underlayColor='#FFAB0A' onPress={this.closeModal6.bind(this)}>
<Image source={require('image!buttonOk')} style={styles.buttonOk} />
</TouchableHighlight>
</Modal>
<Modal style={[styles.modal, styles.modal1]} ref={"modal7"} onClosed={this.onClose} onOpened={this.onOpen} onClosingState={this.onClosingState}>
<Text style={styles.text}>Login Password Cannot Be Empty!</Text>
<Text style={styles.text2}>Please re-enter your password</Text>
<View style={styles.imageEpassword}>
<Image source={require('image!pop_epassword')} style={styles.pop_epassword} />
</View>
<TouchableHighlight style={styles.wrapperButtonCancel} underlayColor='transprance' onPress={this.closeModal7.bind(this)}>
<Image resizeMode="contain" source={require('image!buttonCancel')} style={styles.buttonCancel} />
</TouchableHighlight>
<TouchableHighlight style={styles.wrapperButtonOk} underlayColor='#FFAB0A' onPress={this.closeModal7.bind(this)}>
<Image source={require('image!buttonOk')} style={styles.buttonOk} />
</TouchableHighlight>
</Modal>
</View>
);
}
}
var styles = StyleSheet.create({
thinLine: {.......

Could it be that you have a duplicate color property in a style?