How to change value only from radio button group in react native - react-native

Thanks for your time.
This is supposed to be very simple, but I am having trouble dealing with.
I have a "survey" which contains a few questions and 3 radio buttons for each question.
The problem is: when I select an option from any radio button, the same option is selected for every question.
I just need to change the value from this group only.
I am using RadioButton from react-native-paper.
The RadioButton.Group is supposed to deal with this but I am getting to nowhere.
How can I do this? I saw an example using react-native-simple-paper but it uses Classes and I using a Function component, so I can't use setState like almost every other library does.
Here's my code sample:
const [value, setValue] = React.useState('');
<ScrollView style={{ flexDirection: 'column' }}>
{questions &&
questions .map((p) => {
return (
<View style={{
//flexDirection: 'column',
elevation: 1,
borderRadius: 5,
backgroundColor: '#fff',
marginTop: 15,
marginLeft: 15,
marginRight: 15,
padding: 10
}}>
<Text
style={{
color: '#16416e',
fontFamily: 'Khula-Bold',
textTransform: 'capitalize',
fontSize: 20
}}>
{myCount++ + ' - ' + p.QUESTION_TEXT}
</Text>
<View style={{ marginTop: 15 }}>
<RadioButton.Group onValueChange={newValue => setValue(newValue)} value={value} key={myCount - 1}>
<View style={{ flexDirection: 'row' }}>
<RadioButton key={"S" + myCount - 1} color='#1b2f75' uncheckedColor='#1b2f75' value="S" />
<Text onPress={() => { setValue("S") }} style={{ fontFamily: 'Khula-Bold', color: '#16416e', fontSize: 20, marginTop: 5, marginLeft: 5, paddingBottom: 15 }} >Sim</Text>
</View>
<View style={{ flexDirection: 'row' }}>
<RadioButton key={"N" + myCount - 1} color='#1b2f75' uncheckedColor='#1b2f75' value="N" />
<Text onPress={() => { setValue("N") }} style={{ fontFamily: 'Khula-Bold', color: '#16416e', fontSize: 20, marginTop: 5, marginLeft: 5, paddingBottom: 15 }}>Não</Text>
</View>
<View style={{ flexDirection: 'row' }}>
<RadioButton key={"NA" + myCount - 1} color='#1b2f75' uncheckedColor='#1b2f75' value="NA" />
<Text onPress={() => { setValue("NA") }} style={{ fontFamily: 'Khula-Bold', color: '#16416e', fontSize: 20, marginTop: 5, marginLeft: 5, paddingBottom: 15 }}>N/A</Text>
</View>
</RadioButton.Group>
</View>
</View>
);
})}
</ScrollView>

It is working using react-native-radio-buttons-group
Can provide you more detailed support.

Related

useEffect() not work with a large Component

I have a problem when try to render a large Component, about more than 300 code lines, and the use Effect() function does not work. I use use Effect() to load data, and storage to state. When I remove all the components that use the state , it works again, after that, I add one by one child component, it still works until about 4 components and take error again. damn, I spend 8 hours to fix and fail. there is my code, I rewrote and you can copy paste it to test. Thanks for your help.
import React, { useEffect, useState } from 'react'
import {
View,
Text,
TouchableOpacity,
ScrollView,
Image,
StyleSheet,
} from 'react-native'
import axios from 'axios'
const HomeDetail = () => {
const icon = { uri: 'https://www.google.com/url?sa=i&url=https%3A%2F%2Fwww.iconfinder.com%2Ficons%2F211614%2Farrow_b_down_icon&psig=AOvVaw1MEXG4kbEmt_x8DBErEnbI&ust=1617875579779000&source=images&cd=vfe&ved=0CAIQjRxqFwoTCMCKyqvu6-8CFQAAAAAdAAAAABAD' }
const [data, setData] = useState({})
const [showDescription, setShowDescription] = useState(false)
const [showNearbySchools, setShowNearbySchools] = useState(false)
const [titleNameInput, setTitleNameInput] = useState(false)
const [titleEmailInput, setTitleEmailInput] = useState(false)
const [titlePhoneInput, setTitlePhoneInput] = useState(false)
const [showFooterTab, setShowFooterTab] = useState(false)
const [timeOnRealtor, setTimeOnRealtor] = useState()
useEffect(() => {
const getData = () => {
const options = {
method: 'GET',
url: 'https://realtor.p.rapidapi.com/properties/v2/detail',
params: { property_id: 'R4061264803' },
headers: {
'x-rapidapi-key': '7abe4815e1msh8ad18eb0e589c4cp1fc2e5jsn96386487842d',
'x-rapidapi-host': 'realtor.p.rapidapi.com'
}
};
axios.request(options).then(function (response) {
setData(response.data.properties[0])
}).catch(function (error) {
console.error(error);
});
}
getData();
}, [])
const TextLink = (prop) => {
styles = prop.style ? prop.style : {}
textDecorationLine = prop.underLine ? 'underline' : 'none'
return (
<Text
style={[styles,
{
color: prop.color,
fontSize: prop.fontSize,
textDecorationLine: textDecorationLine
}
]}
onPress={prop.onPress}
>
{prop.text}
</Text>
)
}
const ButtonCustom = (prop) => {
colorText = prop.type ? prop.color : 'red';
colorBackground = prop.type ? 'white' : prop.color;
return (
<TouchableOpacity
style={[prop.style,
{
justifyContent: 'center',
alignItems: 'center',
height: 35,
paddingLeft: 10,
paddingRight: 10,
borderWidth: 1,
borderRadius: 30,
borderColor: prop.color,
backgroundColor: colorBackground,
}
]}
onPress={prop.onPress}
>
<Text style={{
color: colorText,
fontSize: prop.fontSize,
// fontWeight: 'bold',
}}
>
{prop.text}
</Text>
</TouchableOpacity>
)
}
return (
<ScrollView>
<View>
<TextLink text='aaaaaa' color='blue'></TextLink>
</View>
{/* <View style={{ paddingRight: 10, paddingLeft: 10 }}>
<View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
<Text style={{ fontWeight: 'bold', fontSize: 22 }}>${data.price ? data.price : 5}/mo</Text>
<View style={{ flexDirection: 'row' }}>
<Image style={[style.image, { marginLeft: 5 }]} source={icon} />
<Image style={[style.image, { marginLeft: 5 }]} source={icon} />
<Image style={[style.image, { marginLeft: 5 }]} source={icon} />
</View>
</View>
<Text>{data?.address?.line ? data.address?.line : '---'}, {data?.address.city ? data?.address.city : '--'}, {data?.address.state_code ? data.address.state_code : '--'} {data?.address.postal_code ? data.address.postal_code : '--'}</Text>
</View> */}
{/*<View style={{ paddingRight: 10, paddingLeft: 10 }}>
<View style={{
flexDirection: 'row',
width: '100%',
borderBottomColor: 'gray',
borderBottomWidth: 1
}}>
<View style={{ paddingRight: 5, borderRightWidth: 1, borderRightColor: 'gray', marginRight: 5 }}>
<Text style={{ fontWeight: 'bold' }}>{data?.beds}</Text>
<Text style={{ fontSize: 12, color: 'gray' }}>beds</Text>
</View>
<View style={{ paddingRight: 5, borderRightWidth: 1, borderRightColor: 'gray', marginRight: 5 }}>
<Text style={{ fontWeight: 'bold' }} >{data?.baths}</Text>
<Text style={{ fontSize: 12, color: 'gray' }}>baths</Text>
</View>
<View style={{ paddingRight: 5, borderRightWidth: 1, borderRightColor: 'gray', marginRight: 5 }}>
<Text style={{ fontWeight: 'bold' }}>{data?.sqft ? data?.sqft : '--'}</Text>
<Text style={{ fontSize: 12, color: 'gray' }}>sqrt</Text>
</View>
<View style={{ paddingRight: 5, marginRight: 5 }}>
<Text style={{ fontWeight: 'bold' }}>
{data?.client_display_flags.allows_cats | data?.client_display_flags.allows_dogs | data?.client_display_flags.allows_dogs_small | data?.client_display_flags.allows_dogs_large ? 'Yes' : 'No'}
</Text>
<Text style={{ fontSize: 12, color: 'gray' }}>pet</Text>
</View>
</View>
<TextLink text='How much home can you afford ?' color='blue' />
<View style={{}}>
{data?.listing_status ?
(<View style={{ flexDirection: 'row', }}>
<Image style={[style.image, { marginRight: 5 }]} source={icon} />
<Text>{data?.listing_status}</Text>
</View>) : null
}
{data?.prop_type | data?.prop_status ?
(<View style={{ flexDirection: 'row', }}>
<Image style={[style.image, { marginRight: 5 }]} source={.icon} />
<Text>{data?.prop_type, data?.prop_status}</Text>
</View>) : null
}
{timeOnRealtor ?
(<View style={{ flexDirection: 'row', }}>
<Image style={[style.image, { marginRight: 5 }]} source={icon} />
<Text>{timeOnRealtor} ons realtor.com®</Text>
</View>) : null
}
{data?.year_built ?
(<View style={{ flexDirection: 'row', }}>
<Image style={[style.image, { marginRight: 5 }]} source={icon} />
<Text>Built in {data?.year_built}</Text>
</View>) : null
}
{1 ?
(<View style={{ flexDirection: 'row', }}>
<Image style={[style.image, { marginRight: 5 }]} source={icon} />
<Text>style
<TextLink text='ASK AGENT' color='blue' />
</Text>
</View>) : null
}
</View>
<TextLink text='MORE DETAILS' color='blue' />
<ButtonCustom text='EMAIL AGENT' color='red' />
</View>
<View style={{ padding: 10, borderColor: 'gray', borderTopWidth: 1, borderBottomWidth: 1 }}>
<TextLink text='SEE MORE ABOUT THIS BUILDING' color='blue' />
</View>
<TouchableOpacity
style={{ padding: 10 }}
onPress={() => setShowDescription(!showDescription)}
>
<Text>Description</Text>
{showDescription ?
(<Text numberOfLines={1} >{data?.description}</Text>) :
(<View>
<Text >{data?.description}</Text>
<TextLink text='MORE' color='blue' />
</View>)
}
<Image style={{
height: 20,
width: 20,
position: 'absolute',
right: 0,
top: showDescription ? 20 : 30,
}}
source={showDescription ? icon : icon}
/>
</TouchableOpacity>
<TouchableOpacity
style={{
padding: 10,
borderBottomColor: 'gray',
borderTopColor: 'gray',
borderWidth: 1,
}}
onPress={() => setShowNearbySchools(!showNearbySchools)}
>
<Text>Nearby Schools</Text>
{showNearbySchools ?
(<Text > Ratings: Elementary {data?.ratings.great_schools_rating} High {data?.ratings.parent_rating}</Text>) :
(<View>
{data?.schools.map((item, index) => {
if (index < 3) {
return (
<View
key={index}
style={{
flexDirection: 'row',
justifyContent: 'space-between',
paddingTop: 10,
paddingBottom: 10,
borderBottomWidth: index == 3 ? 1 : 0,
borderBottomColor: 'gray'
}}>
<View style={{ flexDirection: 'row' }}>
<View style={{
height: 40,
width: 40,
justifyContent: 'center',
alignItems: 'center',
borderWidth: 3,
borderColor: item.ratings.great_schools_rating ? 'green' : 'gray',
borderRadius: 40,
}}>
{item.ratings.great_schools_rating ?
(<Text style={{ fontWeight: 'bold' }}>{item.ratings.great_schools_rating}
<Text>/10</Text>
</Text>) : (<Text style={{ fontWeight: 'bold' }}>Not Rated</Text>)
}
</View>
<View>
<Text style={{ fontWeight: 'bold' }}>{item.name}</Text>
<Text>{item.funding_type} Grades
<Text style={{ fontWeight: 'bold' }}>{item.grades.range.low} - {item.grades.range.high}</Text>
</Text>
</View>
</View>
<View>
<Text style={{ fontWeight: 'bold' }}>{item.distance_in_miles}</Text>
<Text>mi.</Text>
</View>
</View>
)
}
;
})}
</View>)
}
<Image style={{
height: 20,
width: 20,
position: 'absolute',
right: 0,
top: showNearbySchools ? 20 : 30,
}}
source={showNearbySchools ? icon : icon}
/>
</TouchableOpacity>
<View style={{ paddingRight: 10, paddingLeft: 10 }}>
<Text style={{
paddingTop: 10,
paddingBottom: 10,
borderBottomColor: 'gray',
borderBottomWidth: 1
}}>
Additional Info
</Text>
<View style={{
paddingTop: 10,
paddingBottom: 10,
borderBottomColor: 'gray',
borderBottomWidth: 1
}}>
<Text style={{ fontWeight: 'bold' }}>Presented By</Text>
<TextLink text={data?.agents.name} color='blue' />
</View>
<View style={{
flexDirection: 'row',
alignItems: 'center',
borderBottomWidth: 1,
borderBottomColor: 'gray'
}}>
<Image
style={{ height: 50, width: 100 }}
source={{ uri: data?.office.photo.href }} />
<View style={{
paddingTop: 10,
paddingBottom: 10,
borderBottomColor: 'gray',
borderBottomWidth: 1
}}>
<Text style={{ fontWeight: 'bold' }}>Brokered By</Text>
<TextLink text={data?.office.name} color='blue' />
<TextLink text={data?.office.advantage_phone.display_number} color='blue' />
</View>
<View>
<View style={{ flexDirection: 'row' }}>
<Text>Source {data?.mls.name}</Text>
<Text style={{ backgroundColor: 'gray' }}>property ID {data?.mls.id}</Text>
</View>
</View>
</View>
<View style={{ flexDirection: 'row', padding: 10 }}>
<Image style={{ height: 10, width: 10 }} source={icon} />
<Text>Be aware of scrams. Situations like wire transfers are red flags.
<TextLink text=' Read More' color='blue' />
</Text>
</View>
</View>
{
data.photo ?
(<Image style={{ width: '100%', height: 100 }} source={data.photo[0].href} />)
: null
}
<View style={{ padding: 10 }}>
<Text style={{ fontSize: 20, marginBottom: 10 }}>More about this property</Text>
<View style={{ flexDirection: 'row', marginBottom: 10 }}>
<Image source={icon} />
<TextLink text={data.building_href} color='blue' />
</View>
<View style={{ flexDirection: 'row', marginBottom: 10 }}>
<Text style={{ fontWeight: 'bold', marginRight: 10 }}>Move in</Text>
<Text>2021-04-20</Text>
<Image style={{ height: 10, width: 10, marginLeft: 10 }} source={icon} />
</View>
<View>
{titleNameInput ?
(<Text style={{ fontSize: 12, position: 'absolute', top: -2 }}>Name</Text>)
: null
}
<TextInput style={{
width: '100%',
borderRadius: 3,
borderColor: 'gray',
borderWidth: 1,
paddingLeft: 5,
}}
placeholder='Name'
onPressIn={() => setTitleNameInput(true)}
onPressOut={() => setTitleNameInput(false)}
/>
</View>
<View>
{titleEmailInput ?
(<Text style={{ fontSize: 12, position: 'absolute', top: -2 }}>Email</Text>)
: null
}
<TextInput style={{
width: '100%',
borderRadius: 3,
borderColor: 'gray',
borderWidth: 1,
paddingLeft: 5,
}}
placeholder='Email'
onPressIn={() => setTitleEmailInput(true)}
onPressOut={() => setTitleEmailInput(false)}
/>
</View>
<View>
{titlePhoneInput ?
(<Text style={{ fontSize: 12, position: 'absolute', top: -2 }}>Phone</Text>)
: null
}
<TextInput style={{
width: '100%',
borderRadius: 3,
borderColor: 'gray',
borderWidth: 1,
paddingLeft: 5,
}}
placeholder='Phone'
onPressIn={() => setTitlePhoneInput(true)}
onPressOut={() => setTitlePhoneInput(false)}
/>
</View>
<TextInput style={{
width: '100%',
borderRadius: 3,
borderColor: 'gray',
borderWidth: 1,
paddingLeft: 5,
}}
defaultValue='I am interesting in ...'
/>
<View style={{
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
padding: 10
}}>
<ButtonCustom text='EMAIL AGENT' type={false} />
<Text> or </Text>
<ButtonCustom Text='CALL AGENT' type={false} />
</View>
<Text>by proceeding ...
<TextLink text='More...' color='blue' />
</Text>
</View>
{showFooterTab ?
(<View style={{
justifyContent: 'center',
alignItems: 'center',
padding: 5,
}}>
<ButtonCustom text='EMAIL AGENT' color='red' type={false} />
<View>
<TextLink text='<' />
<Text>1/200</Text>
<TextLink text='>' />
</View>
</View>)
: null
} */}
</ScrollView>
)
}
export default HomeDetail
const style = StyleSheet.create({
image: {
height: 20,
width: 20,
resizeMode: 'cover',
}
})
oh sorry everyone because of this fundamental error, I misunderstood that the useEffect() is run before render function. I did not create a default state, so when it render, it can take a default value and make an error, and the effect function can run to put data to state :) Thank for reading my problem

How do I fix glitching of keyboard when textInput is below keyboard level?

I am developing a password management app in react-native(expo). I Today, I encountered this glitch/bug where the keyboard automatically hides if a TextInput is below the keyboard level. It works if I position it, above keyboard level. I tried Wrapping it with KeyboardAvoidingView but then, I could not interact with TextInput anymore. Also, I am using Input component from "react-native-elements". Here is the demonstration of the problem.
Below is my code:-
<View
style={{
display: "flex",
flexDirection: "column",
position: "relative",
top: "25%",
marginLeft: 12,
}}
>
<View style={{ display: "flex", flexDirection: "row" }}>
<CheckBox
value={this.state.useAlpha}
onValueChange={(val) => this.setState({ useAlpha: val })}
></CheckBox>
<Text style={{ color: "#002c3e" }}>Use Alphabets</Text>
</View>
<View
style={{
display: "flex",
flexDirection: "row",
marginTop: 8,
}}
>
<CheckBox
value={this.state.useNum}
onValueChange={(val) => this.setState({ useNum: val })}
></CheckBox>
<Text style={{ color: "#002c3e" }}>Use Numbers</Text>
</View>
<View
style={{
display: "flex",
flexDirection: "row",
marginTop: 8,
}}
>
<CheckBox
value={this.state.useSym}
onValueChange={(val) => this.setState({ useSym: val })}
></CheckBox>
<Text style={{ color: "#002c3e" }}>Use Symbols</Text>
</View>
<View
style={{ display: "flex", flexDirection: "row", marginLeft: 6 }}
>
<Text style={{ color: "#002c3e" }}>Password Length:-</Text>
<Input
containerStyle={{ marginTop: -6, marginRight: 6 }}
keyboardType="numeric"
inputContainerStyle={{
borderBottomWidth: 2,
width: 60,
fontSize: 12,
borderBottomColor: "#002c3e",
}}
style={{ marginBottom: -10, fontSize: 12 }}
value={this.state.passwordLength}
onChangeText={(txt) => this.setState({ passwordLength: txt })}
></Input>
</View>
</View>

React Native Text Input with Border and always Focused

I'm trying to implement this type of text input, anyone has an idea to how to implement this ?
You can create a customInput like this, you will have to switch to props, currently I have hardcoded the values
const CustomTextInput = () => {
return (
<View style={{ paddingTop: 10 }}>
<Text
style={{
position: 'absolute',
top: 0,
left: 10,
zIndex: 100,
backgroundColor: 'white',
paddingHorizontal: 20,
}}>
Phone
</Text>
<View
style={{
borderWidth: 1,
borderColor: 'red',
flexDirection: 'row',
borderRadius: 10,
paddingHorizontal:5,
paddingTop: 5,
}}>
<AntDesign
name="star"
size={20}
color="black"
style={{ marginRight: 5 }}
/>
<TextInput value="12313" />
</View>
</View>
);
};
Output would be like
You can change the styles anyway you want.
You can try out the snack here
https://snack.expo.io/#guruparan/custominput

Scrollview not working in right way in react native

render() {
return (
<View style={{ flex: 1}}>
{/*for header*/}
<View style = {{flexDirection:'row',justifyContent:'space-between',alignItems: 'center',width:'100%',height:'10%',backgroundColor: '#BE6507',padding:10}}>
<TouchableWithoutFeedback onPress={() =>this.props.navigation.goBack()}>
<Image style={{width: 25, height: 25}} source={require('../assets/back.png')} />
</TouchableWithoutFeedback>
<View/>
<View/>
{/*main content*/}
<ScrollView style={{padding:20,paddingTop:25 }}>
<View style={{alignItems:'center',marginBottom:20, width:Dimensions.get('window').width * 90 / 100}}>
<Image style={{height:"30%",width:"90%",marginBottom:10}} source={require("../assets/logo.png")}/>
<Text style={{fontSize: 21, color: "black",margin:6,marginBottom:25}}>ADD CARD DETAILS</Text>
<TextInput
value={this.state.nameoncard}
onChangeText={(nameoncard) => this.setState({ nameoncard:nameoncard })}
placeholder={'Name On Card'}
placeholderTextColor={'black'}
style={styles.input}
/>
<TextInput
value={this.state.card_num}
onChangeText={(card_num) => this.setState({ card_num:card_num})}
placeholder={'Card Number'}
placeholderTextColor={'black'}
style={styles.input}
/>
<TouchableOpacity style={{width:'90%',margin:10,backgroundColor:'black',padding:10,borderRadius:5,borderWidth:1,marginTop:20,marginBottom:20,height:45}}>
<Text style={{fontSize: 19,fontWeight: 'bold', color: "white", textAlign:'center'}}>Proceed to Pay</Text>
</TouchableOpacity>
</View>
</ScrollView>
);
In above code firstly i made a header for navigation.I want content below header to be scrollview.But above code does not seems to work and after half side of screen in vertical direction i does not see any views? What i am doing wrong here? How can i make scrollview to work correctly in above code?
You can try scrollEnabled with this.
First of all in your return of render() method you can have just one child. So, wrap the View and the ScrollView in a single View. You've also typos in the first section, look at how you're closing those Views: <View/> instead of </View>.
The correct code should be:
return (
<View style={{ flex: 1 }}>
{/*for header*/}
<View
style={{
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
width: '100%',
height: '10%',
backgroundColor: '#BE6507',
padding: 10,
}}>
<TouchableWithoutFeedback
onPress={() => this.props.navigation.goBack()}>
<Image
style={{ width: 25, height: 25 }}
source={require('../assets/back.png')}
/>
</TouchableWithoutFeedback>
</View>
{/*main content*/}
<ScrollView style={{ padding: 20, paddingTop: 25 }}>
<View
style={{
alignItems: 'center',
marginBottom: 20,
width: (Dimensions.get('window').width * 90) / 100,
}}>
<Image
style={{ height: '30%', width: '90%', marginBottom: 10 }}
source={require('../assets/logo.png')}
/>
<Text
style={{
fontSize: 21,
color: 'black',
margin: 6,
marginBottom: 25,
}}>
ADD CARD DETAILS
</Text>
<TextInput
value={this.state.nameoncard}
onChangeText={nameoncard =>
this.setState({ nameoncard: nameoncard })
}
placeholder={'Name On Card'}
placeholderTextColor={'black'}
style={styles.input}
/>
<TextInput
value={this.state.card_num}
onChangeText={card_num => this.setState({ card_num: card_num })}
placeholder={'Card Number'}
placeholderTextColor={'black'}
style={styles.input}
/>
<TouchableOpacity
style={{
width: '90%',
margin: 10,
backgroundColor: 'black',
padding: 10,
borderRadius: 5,
borderWidth: 1,
marginTop: 20,
marginBottom: 20,
height: 45,
}}>
<Text
style={{
fontSize: 19,
fontWeight: 'bold',
color: 'white',
textAlign: 'center',
}}>
Proceed to Pay
</Text>
</TouchableOpacity>
</View>
</ScrollView>
</View>
);

Why my button overlapping my input Text?

My button is overwriting my text, not respecting my flex.
The button should be at the bottom after the text, below the input texts.
Can you help me with this?
import React from 'react';
import { View, Text, TextInput, Button } from 'react-native';
export default props => (
<View style={{ flex: 1, padding: 10 }}>
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center',marginTop: 30 }}>
<Text style={{ fontSize: 25 }}>Teste</Text>
</View>
<View style={{ flex: 2}}>
<TextInput style={{ fontSize: 20, height: 45 }} placeholder='E-mail' />
<TextInput style={{ fontSize: 20, height: 45 }} placeholder='Senha' />
<Text style={{ fontSize: 20 }}>Ainda não tem cadastro? Cadastre-se</Text>
</View>
<View style={{ flex: 2}}>
<Button title="Acessar" color='#115E54' onPress={() => false} />
</View>
</View>
);
I have Tested In Android Platform It's Working Fine.
render() {
return (
<View style={{ flex: 1, padding: 10 }}>
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center', marginTop: 30 }}>
<Text style={{ fontSize: 25 }}>Teste</Text>
</View>
<View style={{ flex: 2 }}>
<TextInput style={{ fontSize: 20, height: 45 }} placeholder='E-mail' />
<TextInput style={{ fontSize: 20, height: 45 }} placeholder='Senha' />
<Text style={{ fontSize: 20 }}>Ainda não tem cadastro? Cadastre-se</Text>
</View>
<View style={{ flex: 2 }}>
<Button title="Acessar" color='#115E54' onPress={() => false} />
</View>
</View>
);
}
I think your code will be like:
<View style={{ flex: 1, padding: 10 }}>
<Text style={{ fontSize: 25, alignSelf : 'center', marginTop: 30 }}>Teste</Text>
<TextInput style={{ fontSize: 20, height: 45, marginTop: 20 }} placeholder='E-mail' />
<TextInput style={{ fontSize: 20, height: 45 }} placeholder='Senha' />
<Text style={{ fontSize: 20, marginTop: 20 }}>Ainda não tem cadastro? Cadastre-se</Text>
<View style={{marginTop: 20}}>
<Button title="Acessar" color='#115E54' onPress={() => false} />
</View>
</View>
I hope this code will be helpful.