Here's what I'm trying to achieve:
I want to display inline all these three elements inside each Block.
Here's what I have done so far:
export default function App() {
const cheers = [
'cheers',
'high five'
]
return (
<Block style={{ flex: 1,
flexDirection: "row",
alignContent: "space-between",
marginTop: 50}}
>
<Block style={{ flex: 2, justifyContent: 'center'}}>
<Text style={{marginRight: 5}}>Send a</Text>
</Block>
<Block style={[styles.dropdownsRow, {flex: 2}]}>
<SelectDropdownMenu
data={cheers}
onSelect={(selectedItem, index) => {
console.log(selectedItem, index);
}}
defaultButtonText={'Cheers'}
buttonTextAfterSelection={(selectedItem, index) => {
return selectedItem.name;
}}
rowTextForSelection={(item, index) => {
return item.name;
}}
buttonStyle={styles.dropdown1BtnStyle}
buttonTextStyle={styles.dropdown1BtnTxtStyle}
renderDropdownIcon={isOpened => {
return <FontAwesome name={isOpened ? 'chevron-up' : 'chevron-down'} color={'#8898aa'} size={10} />;
}}
dropdownIconPosition={'right'}
dropdownStyle={styles.dropdown1DropdownStyle}
rowStyle={styles.dropdown1RowStyle}
rowTextStyle={styles.dropdown1RowTxtStyle}
/>
</Block>
<Block style={{flex: 2, justifyContent: 'center' }}>
<Text style={{marginLeft: 5, marginRight: 5}}>to</Text>
</Block>
<Block style={{ justifyContent: 'center'}}>
<Input
right placeholder="Type your custom question here."
iconContent={<Block />}
/>
</Block>
);
}
const styles = StyleSheet.create({
dropdownsRow: {justifyContent: 'center', maxWidth: '10%'},
dropdown1BtnStyle: {
height: 45,
backgroundColor: '#edeff2',
borderRadius: 5,
borderColor: '#444',
},
dropdown1BtnTxtStyle: {color: '#8898aa', textAlign: 'left', fontSize: 14},
dropdown1DropdownStyle: {backgroundColor: '#EFEFEF'},
dropdown1RowStyle: {backgroundColor: '#EFEFEF', borderBottomColor: '#C5C5C5'},
dropdown1RowTxtStyle: {color: '#444', textAlign: 'left'}
});
I'm new to react native and don't know how flex property works.
Here's my sample output:
The whole code found here whole code
You can use Yoga layout website to find your desired UI and then migrate your styles to your code.
I am able to create the dynamic checkbox but i need to check and uncheck it separately, right now if i check one everything gets checked and if i uncheck everything gets unchecked.
How to change the value of checkbox separately for each checkbox from state?
import React from 'react';
import {View,Text,StyleSheet,TouchableOpacity,Image,Switch,Platform,Dimensions,PixelRatio,} from'react-native';
import ImagePicker from 'react-native-image-picker';
import { Input, Button } from 'react-native-elements';
import { moderateScale } from 'react-native-size-matters';
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);
class ErrorScreen extends React.Component {
constructor() {
super();
this.state = {
arr: [],
parkPay: false,
itemChecked: false,
index: null,
};
}
functionTwo = () => {
alert('func 2');
this.setState(() => ({
parkPay: true,
}));
};
checkedItem = index => {
console.log('this is index', index);
// let itemChecked = this.state.itemChecked
if (this.state.index != index) {
this.setState(() => ({
index: index,
itemChecked: !this.state.itemChecked,
}));
}
};
addParkField = () => {
console.log('jjjjj');
console.log(' ^^ props in parking form ^^ ', this.props);
let x = 0;
this.setState(() => ({
arr: [...this.state.arr, ''],
}));
// this.addFieldSecond()
// this.props.addParkFieldSecond()
};
render() {
return (
<View>
<View
style={{flex: 1, paddingRight: calcWidth(4),paddingLeft: calcWidth(6), paddingTop: calcHeight(4),paddingBottom: calcHeight(4),
}}>
<Input
placeholder="Enter Amount"
label="Enter Amount"
labelStyle={{ fontWeight: '200', color: 'black' }}
inputContainerStyle={{
paddingRight: calcWidth(2),
paddingLeft: calcWidth(2),
paddingTop: calcHeight(1),
paddingBottom: calcHeight(1),
}}
// onChangeText={this.props.parkingAmount}
/>
<Text style={[styles.error]}>{this.state.errors.Amount}</Text>
<View
style={{ paddingLeft: calcWidth(2), paddingTop: calcHeight(4) }}>
<View style={{ paddingRight: calcWidth(70) }}>
<Switch
value={this.state.parkPay}
style={
Platform.OS === 'ios' ? styles.switchIOS : styles.switchAND
}
// onValueChange={(value) => {this.props.toggleCustomerParkingPay(value); this.functionTwo()}}
/>
</View>
<Text style={{ paddingTop: calcHeight(8) }}>Paid By Customer</Text>
</View>
</View>
<View style={{}}>
{this.state.arr.map((extra, index) => {
return (
<View
style={{
flex: 1,
paddingRight: calcWidth(4),
paddingLeft: calcWidth(20),
paddingTop: calcHeight(15),
paddingBottom: calcHeight(4),
}}
key={index}>
<Input
placeholder="Enter Amount"
label="Enter Amount"
labelStyle={{ fontWeight: '200', color: 'black' }}
inputContainerStyle={{
paddingRight: calcWidth(2),
paddingLeft: calcWidth(2),
paddingTop: calcHeight(1),
paddingBottom: calcHeight(1),
}}
// onChangeText={this.handleAmount}
// onChangeText={this.props.parkingAmount}
/>
<Text style={[styles.error]}>{this.state.errors.Amount}</Text>
<View style={{ paddingTop: calcHeight(4) }}>
<View style={{ paddingRight: calcWidth(70) }}>
<Switch
value={this.state.parkPay}
style={
Platform.OS === 'ios'
? styles.switchIOS
: styles.switchAND
}
// onValueChange={(value) => {this.props.toggleCustomerParkingPay(value);}}
/>
</View>
<Text style={{ paddingTop: calcHeight(8) }}>
Paid By Customer
</Text>
</View>
</View>
);
})}
<View>
<View
style={{ paddingLeft: calcWidth(60), paddingTop: calcHeight(2) }}>
<TouchableOpacity
style={[styles.cardCirclePassenger]}
onPress={this.addParkField}>
<View
style={{
justifyContent: 'center',
alignItems: 'center',
paddingTop: calcHeight(2.2),
}}>
{/* <Image
style={{width: 24, height: 24}}
source={require('../../images/Group424.png')}
/> */}
<Text>Add</Text>
</View>
</TouchableOpacity>
</View>
</View>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
cardCirclePassenger: {
backgroundColor: '#31588A',
marginBottom: 10,
marginLeft: '5%',
width: 60,
height: 60,
borderRadius: 60 / 2,
borderColor: 'white',
shadowOpacity: 0.2,
shadowRadius: 1,
shadowOffset: {
width: 3,
height: 3,
},
borderWidth: 1,
},
switchIOS: {
transform: [
{ scaleX: moderateScale(0.7, 0.2) },
{ scaleY: moderateScale(0.7, 0.2) },
],
},
switchAND: {
transform: [
{ scaleX: moderateScale(1, 0.2) },
{ scaleY: moderateScale(1, 0.2) },
],
},
});
export default ErrorScreen;
i worked around a little bit and found the below way to generate dynamic checboxes along with separate state values. hope this helps someone.
The below code creates dynamic key-value pairs in state. if you console.log the state in your render you'll see (check0:true check1:true check2: false ....) .
<Switch
value={this.state[`check${key}`]}
onValueChange={value => this.setState({ [`check${key}`]: value })}
/>
I am trying to implement a SrollView in my project however for some reason when I try to scroll through all the elements inside it, it springs back to the top of the ScrollView. I've looked around and some other questions were resolved by adding flex:1 to the ScrollView, however when I try that the entire ScrollView goes off screen. I've tried to add position:'absolute' to the ScrollView however that only leads to the scrollView not moving anymore
I've also tried experimenting with <KeyboardAwareScrollView> however the screen doesn't seem to adjust to the Input.
Here is my code:
import React from "react";
import {
View,
Dimensions,
Platform,
ActivityIndicator,
Alert,
Image,
KeyboardAvoidingView,
TouchableHighlight,
Keyboard
} from "react-native";
import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view'
import { Form, Item, Input, Label, Button, Text, Picker } from "native-base";
import * as firebase from "firebase";
import { ScrollView } from "react-native-gesture-handler";
import { LinearGradient, ImagePicker, Permissions } from "expo";
import Modal from "react-native-modal";
import uuid from "uuid";
import axios from "axios";
<View style={{borderBottomLeftRadius:20, borderBottomRightRadius:20, marginTop:20}}>
<TouchableHighlight onPress={this.toggleModal} underlayColor="white">
<Image source={{ uri: this.state.imageUrl }} style={{ width: SCREEN_WIDTH, height: SCREEN_HEIGHT/3, borderRadius: 20, marginBottom:20 }}/>
</TouchableHighlight>
</View>
}
{!this.state.loading ? (
<Button
full
style={{
fontFamily: "nunito",
backgroundColor: 'transparent',
alignSelf: "center",
height: SCREEN_HEIGHT/3,
width: SCREEN_WIDTH
}}
onPress={() => this.alertOptions()}
>
<View style={{flexDirection:'column'}}>
<Text
style={{
fontFamily: "nunito",
color: "black",
fontSize: 30,
textAlign: 'center'
}}
>
{this.state.imageUrl === ""
? "Tap"
: ""}
</Text>
<Text
style={{
fontFamily: "nunito",
color: "black",
fontSize: 30,
textAlign: 'center'
}}
>
{this.state.imageUrl === ""
? "to"
: ""}
</Text>
<Text
style={{
fontFamily: "nunito",
color: "black",
fontSize: 30,
textAlign:'center'
}}
>
{this.state.imageUrl === ""
? "Upload Photo"
: ""}
</Text>
</View>
</Button>
) : (
<Text style={{color:'white', textAlign:'center', fontSize: 40, marginTop: 25}}>Loading...Please Wait</Text>
)}
</View>
<View>
<ScrollView showsVerticalScrollIndicator={false} style={{ borderTopRightRadius: -20, borderTopLeftRadius: -20, backgroundColor:"#a2b6d8",}}>
<Text
style={{
fontSize: 28,
color: "#404040",
fontWeight: "700",
marginLeft: 12,
marginBottom: 10,
marginTop: 20,
textAlign: "center"
}}
>
Enter your details below
</Text>
<Form>
<Item stackedLabel rounded>
<Label style={{ fontFamily: "nunito" }}>
Address (Street, City)<Text style={{ color: "red", marginLeft: 10 }}>*</Text>
</Label>
<Input
placeholderTextColor="#9e9e9e"
placeholder="Required"
onChangeText={e => this.setState({ address: e })}
style={{ fontFamily: "nunito" }}
/>
</Item>
<Item stackedLabel>
<Label style={{ fontFamily: "nunito" }}>
Name
<Text style={{ color: "red", marginLeft: 10 }}>*</Text>
</Label>
<Input
placeholderTextColor="#9e9e9e"
placeholder="Required"
onChangeText={e => this.setState({ name: e })}
style={{ fontFamily: "nunito" }}
/>
</Item>
<Item stackedLabel>
<Label style={{ fontFamily: "nunito" }}>
Contractor{" "}
<Text style={{ color: "red", marginLeft: 10 }}>*</Text>
</Label>
<Input
placeholderTextColor="#9e9e9e"
placeholder="Required"
onChangeText={e => this.setState({ contractor: e })}
style={{ fontFamily: "nunito" }}
/>
</Item>
<Item stackedLabel>
<Label style={{ fontFamily: "nunito" }}>
Zip
<Text style={{ color: "red", marginLeft: 10 }}>*</Text>
</Label>
<Input
placeholderTextColor="#9e9e9e"
placeholder="Required"
onChangeText={e => this.setState({ zip: e })}
style={{ fontFamily: "nunito" }}
/>
</Item>
<Item stackedLabel>
<Label style={{ fontFamily: "nunito" }}>
Type of work performed
<Text style={{ color: "red", marginLeft: 10 }}>*</Text>
</Label>
<Input
placeholderTextColor="#9e9e9e"
placeholder="Required"
onChangeText={e => this.setState({ performed: e })}
style={{ fontFamily: "nunito" }}
/>
</Item>
</Form>
<View
style={{
flexDirection: "row",
justifyContent: "center",
alignItems: "center",
marginTop: 20,
marginBottom: 10
}}
>
</View>
<View
style={{
justifyContent:'space-around',
marginLeft: 15,
flexDirection:'row'
}}
>
{!this.state.loader ? (
<Button
full
style={{
fontFamily: "nunito",
backgroundColor: "#f3d95c",
width: SCREEN_WIDTH/3,
borderRadius:50,
shadowColor: "#918236",
shadowOffset: {
width: 0,
height: 0,
},
shadowOpacity: 0.8,
shadowRadius: 4,
// alignSelf: "center",
}}
onPress={() => this.add()}
>
<Text
style={{
fontFamily: "nunito",
color: "black",
fontSize: 22
}}
>
SEND
</Text>
</Button>
) : (
<ActivityIndicator size="large" color="#f3d95c" />
)}
<Button
onPress={() => this.logout()}
style={{ alignSelf: "center", marginBottom: 20, backgroundColor:'red', borderRadius:50 }}
>
<Text style={{fontSize:18}}>Logout</Text>
</Button>
</View>
</ScrollView>
</View>
Replace the content of the files.
EnterDetails.js
import React from "react";
import {
View,
Dimensions,
Platform,
ActivityIndicator,
Alert,
Image,
KeyboardAvoidingView,
TouchableHighlight,
TouchableWithoutFeedback,
Keyboard,
ScrollView
} from "react-native";
import { KeyboardAwareScrollView } from "react-native-keyboard-aware-scroll-view";
import { Form, Item, Input, Label, Button, Text, Picker } from "native-base";
import * as firebase from "firebase";
import { LinearGradient, ImagePicker, Permissions } from "expo";
import Modal from "react-native-modal";
import uuid from "uuid";
import axios from "axios";
const SCREEN_WIDTH = Dimensions.get("window").width;
const SCREEN_HEIGHT = Dimensions.get("window").height;
export default class EnterDetails extends React.Component {
constructor(props) {
super(props);
this.state = {
loader: false,
loading: false,
address: "",
name: "",
contractor: "",
zip: "",
email: "frank.gully2800#gmail.com",
// userEmail: firebase.auth().currentUser.email,
imageUrl: "",
performed: ""
};
}
state = {
isModalVisible: false
};
toggleModal = () => {
this.setState({ isModalVisible: !this.state.isModalVisible });
};
onValueChange(value) {
this.setState({
selected: value
});
}
imagePicker = () => {
Permissions.askAsync(Permissions.CAMERA_ROLL);
ImagePicker.launchImageLibraryAsync({
allowsEditing: false,
base64: true
}).then(async result => {
const blob = await new Promise((resolve, reject) => {
const xhr = new XMLHttpRequest();
xhr.onload = function() {
resolve(xhr.response);
};
xhr.onerror = function(e) {
reject(new TypeError("Network request failed"));
};
xhr.responseType = "blob";
xhr.open("GET", result.uri, true);
xhr.send(null);
});
const ref = firebase
.storage()
.ref()
.child(uuid.v4());
const snapshot = await ref.put(blob);
blob.close();
let imageUrl = await snapshot.ref.getDownloadURL();
this.setState({ imageUrl: imageUrl, loading: false });
});
};
cameraUsage = () => {
this.setState({ loading: true });
Permissions.askAsync(Permissions.CAMERA);
ImagePicker.launchCameraAsync({
allowsEditing: false,
base64: true
}).then(async result => {
const blob = await new Promise((resolve, reject) => {
const xhr = new XMLHttpRequest();
xhr.onload = function() {
resolve(xhr.response);
};
xhr.onerror = function(e) {
reject(new TypeError("Network request failed"));
};
xhr.responseType = "blob";
xhr.open("GET", result.uri, true);
xhr.send(null);
});
const ref = firebase
.storage()
.ref()
.child(uuid.v4());
const snapshot = await ref.put(blob);
blob.close();
let imageUrl = await snapshot.ref.getDownloadURL();
this.setState({ imageUrl: imageUrl, loading: false });
});
};
add = () => {
if (
this.state.zip !== "" &&
this.state.address !== "" &&
this.state.name !== "" &&
this.state.contractor !== "" &&
this.state.email !== "" &&
this.state.imageUrl !== "" &&
this.state.performed !== ""
) {
const {
name,
imageUrl,
contractor,
address,
email,
zip,
performed
} = this.state;
axios
.post(
"https://us-central1-cccproject-2b2f6.cloudfunctions.net/sendMailToUser",
{
zip: zip,
name: name,
imageUrl: imageUrl,
address: address,
email: email,
contractor: contractor,
performed: performed,
userEmail: this.state.userEmail
}
)
.then(response => {
Alert.alert("Details Sent");
})
.catch(error => {});
} else {
Alert.alert("Please Complete The form");
}
};
alertOptions = () => {
Alert.alert(
"Photo Options",
"Choose how you upload your photo",
[
{ text: "Camera", onPress: () => this.cameraUsage() },
{
text: "Image Library",
onPress: () => this.imagePicker()
},
{
text: "Cancel",
onPress: () => console.log("Day sayd no :("),
style: "cancel"
}
],
{ cancelable: false }
);
};
logout = () => {
firebase
.auth()
.signOut()
.then(s => {
this.props.navigation.navigate("Login");
})
.catch(e => {});
};
render() {
return (
<View style={{ flex: 1 }}>
<View
style={{
width: SCREEN_WIDTH,
height: SCREEN_HEIGHT / 3,
alignSelf: "center",
marginTop: 0,
backgroundColor: "red",
borderBottomLeftRadius: 20,
borderBottomRightRadius: 20
}}
>
{this.state.imageUrl === "" ? null : (
<View
style={{
borderBottomLeftRadius: 20,
borderBottomRightRadius: 20,
marginTop: 20
}}
>
<TouchableHighlight
onPress={this.toggleModal}
underlayColor="white"
>
<Image
source={{ uri: this.state.imageUrl }}
style={{
width: SCREEN_WIDTH,
height: SCREEN_HEIGHT / 3,
borderRadius: 20,
marginBottom: 20
}}
/>
</TouchableHighlight>
</View>
)}
{!this.state.loading ? (
<Button
full
style={{
fontFamily: "nunito",
backgroundColor: "transparent",
alignSelf: "center",
height: SCREEN_HEIGHT / 3,
width: SCREEN_WIDTH
}}
onPress={() => this.alertOptions()}
>
<View style={{ flexDirection: "column" }}>
<Text
style={{
fontFamily: "nunito",
color: "black",
fontSize: 30,
textAlign: "center"
}}
>
{this.state.imageUrl === "" ? "Tap" : ""}
</Text>
<Text
style={{
fontFamily: "nunito",
color: "black",
fontSize: 30,
textAlign: "center"
}}
>
{this.state.imageUrl === "" ? "to" : ""}
</Text>
<Text
style={{
fontFamily: "nunito",
color: "black",
fontSize: 30,
textAlign: "center"
}}
>
{this.state.imageUrl === "" ? "Upload Photo" : ""}
</Text>
</View>
</Button>
) : (
<Text
style={{
color: "white",
textAlign: "center",
fontSize: 40,
marginTop: 25
}}
>
Loading...Please Wait
</Text>
)}
</View>
<View style={{ borderWidth: 2, borderColor: "pink", flex: 1 }}>
<ScrollView
style={{
borderTopRightRadius: -20,
borderTopLeftRadius: -20,
backgroundColor: "#a2b6d8",
position: "relative",
flex: 1
}}
>
<Text
style={{
fontSize: 28,
color: "#404040",
fontWeight: "700",
marginLeft: 12,
marginBottom: 10,
marginTop: 20,
textAlign: "center"
}}
>
Enter your details below
</Text>
<Form>
<Item stackedLabel rounded>
<Label style={{ fontFamily: "nunito" }}>
Address (Street, City)
<Text style={{ color: "red", marginLeft: 10 }}>*</Text>
</Label>
<Input
placeholderTextColor="#9e9e9e"
placeholder="Required"
onChangeText={e => this.setState({ address: e })}
style={{ fontFamily: "nunito" }}
/>
</Item>
<Modal isVisible={this.state.isModalVisible}>
<Image
source={{ uri: this.state.imageUrl }}
style={{
width: SCREEN_WIDTH / 1.1,
height: SCREEN_HEIGHT / 1.1,
justifyContent: "center",
alignSelf: "center",
marginBottom: 0
}}
resizeMode="contain"
/>
<Button
style={{
backgroundColor: "red",
borderBottomRightRadius: 20,
borderBottomLeftRadius: 20,
borderTopLeftRadius: 20,
borderTopRightRadius: 20,
width: SCREEN_WIDTH - 20,
alignSelf: "center",
justifyContent: "center"
}}
onPress={this.toggleModal}
>
<Text style={{ fontFamily: "nunito", textAlign: "center" }}>
Close
</Text>
</Button>
</Modal>
<Item stackedLabel>
<Label style={{ fontFamily: "nunito" }}>
Name
<Text style={{ color: "red", marginLeft: 10 }}>*</Text>
</Label>
<Input
placeholderTextColor="#9e9e9e"
placeholder="Required"
onChangeText={e => this.setState({ name: e })}
style={{ fontFamily: "nunito" }}
/>
</Item>
<Item stackedLabel>
<Label style={{ fontFamily: "nunito" }}>
Contractor{" "}
<Text style={{ color: "red", marginLeft: 10 }}>*</Text>
</Label>
<Input
placeholderTextColor="#9e9e9e"
placeholder="Required"
onChangeText={e => this.setState({ contractor: e })}
style={{ fontFamily: "nunito" }}
/>
</Item>
<Item stackedLabel>
<Label style={{ fontFamily: "nunito" }}>
Zip
<Text style={{ color: "red", marginLeft: 10 }}>*</Text>
</Label>
<Input
placeholderTextColor="#9e9e9e"
placeholder="Required"
onChangeText={e => this.setState({ zip: e })}
style={{ fontFamily: "nunito" }}
/>
</Item>
<Item stackedLabel>
<Label style={{ fontFamily: "nunito" }}>
Type of work performed
<Text style={{ color: "red", marginLeft: 10 }}>*</Text>
</Label>
<Input
placeholderTextColor="#9e9e9e"
placeholder="Required"
onChangeText={e => this.setState({ performed: e })}
style={{ fontFamily: "nunito" }}
/>
</Item>
</Form>
<View
style={{
flexDirection: "row",
justifyContent: "center",
alignItems: "center",
marginTop: 20,
marginBottom: 10
}}
></View>
<View
style={{
justifyContent: "space-around",
marginLeft: 15,
flexDirection: "row"
}}
>
{!this.state.loader ? (
<Button
full
style={{
fontFamily: "nunito",
backgroundColor: "#f3d95c",
width: SCREEN_WIDTH / 3,
borderRadius: 50,
shadowColor: "#918236",
shadowOffset: {
width: 0,
height: 0
},
shadowOpacity: 0.8,
shadowRadius: 4
// alignSelf: "center",
}}
onPress={() => this.add()}
>
<Text
style={{
fontFamily: "nunito",
color: "black",
fontSize: 22
}}
>
SEND
</Text>
</Button>
) : (
<ActivityIndicator size="large" color="#f3d95c" />
)}
<Button
onPress={() => this.logout()}
style={{
alignSelf: "center",
marginBottom: 20,
backgroundColor: "red",
borderRadius: 50
}}
>
<Text style={{ fontSize: 18 }}>Logout</Text>
</Button>
</View>
</ScrollView>
</View>
</View>
);
}
}
App.js
import React from "react";
import { AppLoading } from "expo";
import * as Font from "expo-font";
import { Ionicons } from "#expo/vector-icons";
import Routes from "./Routes";
import { View, StatusBar } from "react-native";
import * as firebase from "firebase";
var firebaseConfig = {//ADD YOUR CREDS HERE};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
export default class App extends React.Component {
state = {
isReady: true,
isTrue: false
};
async componentWillMount() {
await Font.loadAsync({
...Ionicons.font,
Roboto: require("native-base/Fonts/Roboto.ttf"),
Roboto_medium: require("native-base/Fonts/Roboto_medium.ttf"),
nunito: require("./assets/nunito/Nunito-Regular.ttf"),
MonReg: require("./assets/Montserrat-Regular.ttf"),
MonBold: require("./assets/Montserrat-Bold.ttf")
});
this.setState({ isReady: false });
}
render() {
setTimeout(() => this.setState({ isTrue: true }), 6000);
if (this.state.isReady) {
return <AppLoading />;
}
return (
<View style={{ flex: 1 }}>
<StatusBar backgroundColor="rgba(255,255,255,1)" />
<Routes />
</View>
);
}
}
I try to show how many character are left to input in my filed render but I get _this.setState is not a function. (in '_this.setState({value: value})','_this.setState' is undefined)
And here is my render
const renderField = ({ label, keyboardType, name, meta: { touched, error }, input: { onChange, ...restInput } }) => {
this.state = {
value: ''
}
return (
<View style={{ flexDirection: 'column', height: 70, alignItems: 'flex-start' }}>
<View style={{ flexDirection: 'row', alignItems: 'center', borderColor: 'black', borderBottomWidth: 1, }}>
<TextInput style={{ height: 37, width: 295, paddingLeft: 10, fontSize: 20, height: 350, justifyContent: "flex-start" }}
keyboardType={keyboardType} value={this.state.value} onChangeText={(value) => this.setState({ value })} {...restInput}
placeholder={label} numberOfLines={10} multiline={true} maxLength={100}
>
</TextInput>
</View>
<Text>
Characters Left: {this.state.value.length}/100
</Text>
{touched && ((error && <Text style={{ color: 'red', }}>{error}</Text>))}
</View>);
};
You have defined renderField as a functional component, a functional component is stateless by definition. In order to use state all you need to do is change this to class component.
Here is the official link to convert functional component to class component.
Hope this will help!
I am trying to build a form in React Native using React Redux Form but I can use the <TextInput> for Email & Password but now I would like to use some checkboxes and dropdowns. Their documentationm doesn't provide an React Native guideline or any examples as they use simply <Input> tag for any inputs but how do i use this in React Native?
Here is my field render I use for email:
const renderField = ({ label, type, keyboardType, name, meta: { touched, error }, input: { onChange, ...restInput } }) => {
return (
<View style={{ flexDirection: 'column', height: 70, alignItems: 'flex-start' }}>
<View style={{ flexDirection: 'row', height: 30, alignItems: 'center', borderColor: 'black', borderBottomWidth: 1, }}>
<FontAwesome name='email-outline' size={18} color='#cccccc' style={{ paddingLeft: 2 }} />
<TextInput style={{ height: 37, width: 280, paddingLeft: 10, fontSize: 20 }}
keyboardType={keyboardType} onChangeText={onChange} {...restInput}
placeholder={label}
>
</TextInput>
</View>
{touched && ((error && <Text style={{ color: 'red', }}>{error}</Text>))}
</View>);
};
<Field keyboardType='email-address' type='email' label='Email' component={renderField} name='email' />
And what's the problem?
Just create a checkboxField component that you'll use instead of renderField in the places you need. And simply use the onChange function from the props to set a value and value as the value itself.
Here is an example that would be easier to understand:
const renderField = ({ input: { onChange, value } }) => {
return (
<View>
<Switch
onValueChange={(value) => onChange(value)}
value={value}
/>
</View>
);
};