I have the following and i have all the imports added. Please see below code (apologies as a bit of a newbie)
return (
<View style={styles.container}>
<KeyboardAwareScrollView
style={{ flex: 1, width: '100%' }}
keyboardShouldPersistTaps="always">
<Image
style={styles.logo}
source={require('../../../assets/logo.png')}
/>
<TextInput
style={styles.input}
placeholder='E-mail'
placeholderTextColor="#CBB26A"
onChangeText={(text) => setEmail(text)}
value={email}
underlineColorAndroid="transparent"
autoCapitalize="none"
/>
<TextInput
style={styles.input}
placeholderTextColor="#CBB26A"
secureTextEntry
placeholder='Password'
onChangeText={(text) => setPassword(text)}
value={password}
underlineColorAndroid="transparent"
autoCapitalize="none"
/>
<TouchableOpacity
style={styles.button}
onPress={() => onLoginPress()}>
<Text style={styles.buttonTitle}>Log in</Text>
</TouchableOpacity>
<View style={styles.footerView}>
<Text style={styles.footerText}>Don't have an account? <Text onPress={onFooterLinkPress} style={styles.footerLink}>Sign up</Text></Text>
</View>
</KeyboardAwareScrollView>
</View>
)
}
I want to add a background image to cover everything but still make everything work as normal (so it all sits on top of the image). i cant wrap them with imageBackground because of objects. Any ideas how i can achieve this?
You can create your style and then merge your style with the styles.container.
const wrapperStyle = {
...styles.container,
background: // your code here
}
Then use this wrapperStyle into your View as
<View style={wrapperStyle}>
Related
I'm trying to create a form with a reset button in order to clear all fields, I'm building a Class Component I don't like the idea of using setState in each field, do you know any better way to clear this form?
simplified code example:
class Registration extends React.Component {
constructor(){
super();
this.state= {}
}
render() {
return (
<View >
<View >
<TouchableOpacity
style={{ styles.button }}
onPress={ } >
<Text style={{ style.text }} >RESET</Text>
</TouchableOpacity>
</View>
<ScrollView>
<View >
<TextInput
ref={this.textInput}
style={{ styles.input }}
placeholder='Name'
onChangeText={(text) => { }}
/>
</View>
<View >
<TextInput
style={{ styles.input}}
onChangeText={(text) => { }}
placeholder='Username'
/>
</View>
<View >
<TextInput
style={{ styles.input}}
onChangeText={(text) => { }}
placeholder='password'
/>
</View>
<View >
<TextInput
style={{ styles.input}}
onChangeText={(text) => { }}
placeholder='email'
/>
</View>
.
.
.
</ScrollView>
</View>
);
}
}
In my component, I was rendering a button for each Item. It was working. However, when I wrap all of it in a touchable TouchableOpacity, the button no longer works. Everything is the touchable opacity now. How can I still use the button?
return (
<TouchableOpacity onPress= {()=> console.log('Hello')}>
<View style={styles.item} key={item.id}>
<Thumbnail
style={styles.thumbnail}
source={{
uri:
'https://cdn4.iconfinder.com/data/icons/avatars-xmas-giveaway/128/afro_woman_female_person-512.png',
}}></Thumbnail>
<View style={styles.nameNumber}>
<Text style={styles.userName}>{userName}</Text>
</View>
<View style={styles.deleteButtonContainer}>
<Button
rounded
style={styles.deleteButton}
onPress={() => onDeleteContact(item.id)}
>
<Icon name="trash-o" size={moderateScale(20)} color="black" />
</Button>
</View>
</View>
</TouchableOpacity>
);
},
Change like this? (Wrap the tag except the button?)
return (
<View style={styles.item} key={item.id}>
<TouchableOpacity onPress= {()=> console.log('Hello')}>
<Thumbnail
style={styles.thumbnail}
source={{
uri:
'https://cdn4.iconfinder.com/data/icons/avatars-xmas-giveaway/128/afro_woman_female_person-512.png',
}}></Thumbnail>
<View style={styles.nameNumber}>
<Text style={styles.userName}>{userName}</Text>
</View>
</TouchableOpacity>
<View style={styles.deleteButtonContainer}>
<Button
rounded
style={styles.deleteButton}
onPress={() => onDeleteContact(item.id)}
>
<Icon name="trash-o" size={moderateScale(20)} color="black" />
</Button>
</View>
</View>
);
},
I'm new with react native and I'm building an app with sign in and sign up interfaces, trying to use (this.props.type) to control signings/signup button, but I got an error in my code, hope you guys help me :)
import React from 'react';
import {
SafeAreaView,
StyleSheet,
ScrollView,
View,
TextInput,
TouchableOpacity,
Text
} from 'react-native';
const Form: () => React$Node = () => {
return (
<View style={styles.container}>
<TextInput style={styles.inputBox}
underlineColorAndroid= 'rgba(0,0,0,0)'
placeholder= "Phone Number"
autoCorrect={true}
textContentType="telephoneNumber"
keyboardType="numbers-and-punctuation"
placeholderTextColor = "#ffffff"
/>
<TextInput style={styles.inputBox}
underlineColorAndroid= 'rgba(0,0,0,0)'
placeholder= "Email"
autoCorrect={true}
textContentType="emailAddress"
keyboardType="email-address"
placeholderTextColor = "#ffffff"
/>
<TextInput style={styles.inputBox}
underlineColorAndroid= 'rgba(0,0,0,0)'
placeholder= "Email Password"
secureTextEntry={true}
placeholderTextColor = "#ffffff"
/>
<TouchableOpacity style={styles.button}>
<Text style={styles.buttonText}>{this.props.type} </Text>
</TouchableOpacity>
</View>
);
};
I also use these to lines in both sign in and sign up files :
<Form types="SignUp"/>
<Form types="SignIn"/>
change Form to receive params
const Form: ({ types }) => React$Node = () => {
then use it like
<TouchableOpacity style={styles.button}>
<Text style={styles.buttonText}>{types} </Text>
</TouchableOpacity>
and render your form
<Form types="SignUp"/>
<Form types="SignIn"/>
Form component without typescript
const Form = ({ types }) => (
<View style={styles.container}>
<TextInput
style={styles.inputBox}
underlineColorAndroid="rgba(0,0,0,0)"
placeholder="Phone Number"
autoCorrect={true}
textContentType="telephoneNumber"
keyboardType="numbers-and-punctuation"
placeholderTextColor="#ffffff"
/>
<TextInput
style={styles.inputBox}
underlineColorAndroid="rgba(0,0,0,0)"
placeholder="Email"
autoCorrect={true}
textContentType="emailAddress"
keyboardType="email-address"
placeholderTextColor="#ffffff"
/>
<TextInput
style={styles.inputBox}
underlineColorAndroid="rgba(0,0,0,0)"
placeholder="Email Password"
secureTextEntry={true}
placeholderTextColor="#ffffff"
/>
<TouchableOpacity style={styles.button}>
<Text style={styles.buttonText}>{types} </Text>
</TouchableOpacity>
</View>
);
The problem is in your Text you are fetching this.props.type <Text style={styles.buttonText}>{this.props.type} </Text> but you are passing types <Form types="SignUp"/>
So change inside Text to
<Text style={styles.buttonText}>{this.props.types} </Text>
hope it helps
I am setting option menu when click on icon,but it show menu sizes different rather than same. I am setting this menu as flat list item, and using react-native-popup-menu library, and any other way to display menu.I want to use menu options with fixed height and width of each of them.
Here is my code :-
_renderItem = ({item}) => {
return(
<TouchableOpacity onPress={() => this.handleListItemPress(item)}>
<View >
<View >
<View style={{flexDirection:'row',marginBottom:2}}>
<ImageView
image={item.pictures[0]}
style={[{marginRight:2},styles.imageStyle]}
/>
<ImageView
image={item.pictures[1]}
style={[{marginLeft:2},styles.imageStyle]}
/>
</View>
<View style={{flexDirection:'row',marginTop:2}}>
<ImageView
style={[{marginRight:2},styles.imageStyle]}
image={item.pictures[2]}
/>
<ImageView
image={item.pictures[3]}
style={[{marginLeft:2},styles.imageStyle]}
/>
</View>
</View>
<View>
<TextViewNonClickable
textViewText={item.name}
/>
<TextViewNonClickable
textViewText={item.description}
/>
</View>
<MenuProvider>
<Menu style={{position:'absolute',top:8,right:8}}>
<MenuTrigger >
<Icon
name = 'more-vertical'
type = 'feather'
color = {color.colorWhite}
iconStyle={{padding:12}}
size={24}
/>
</MenuTrigger>
<MenuOptions >
<MenuOption >
<Text >edit</Text>
</MenuOption>
<MenuOption>
<Text >delete</Text>
</MenuOption>
</MenuOptions>
</Menu>
</MenuProvider>
</View>
</TouchableOpacity>
)
}
Please pass customStyles as a prop to MenuOptions and MenuOption.
<MenuOptions optionsContainerStyle={{width:100,height:60}}>
<MenuOption customStyles={{width:100,height:30}}/>
</MenuOptions>
I have done it,but i could not show menus overs the text
and here is my new code :-
<MenuProvider>
<Menu style={{position:'absolute',top:0,right:0}}>
<MenuTrigger >
<Icon
name = 'more-vertical'
type = 'feather'
color = {color.colorWhite}
iconStyle={{padding:12}}
size={24}
/>
</MenuTrigger>
<MenuOptions optionsContainerStyle=
{{paddingLeft:8,height:96,width:100}}>
<MenuOption customStyles={{height:48,width:100}}>
<Text
style={{fontWeight:'bold',paddingTop:8}}
onPress={() =>
this.openAddOrUpdateModal('update',item)}
>edit</Text>
</MenuOption>
<MenuOption customStyles={{height:48,width:100}}>
<Text style=
{{fontWeight:'bold',paddingTop:8}}>delete</Text>
</MenuOption>
</MenuOptions>
</Menu>
</MenuProvider>
I am trying to write a very simple app to test react native.
I have some TextInput components in a big ScrollView, as a register formulary.
Everything works fine, but when I scroll clicking on a TextInput, it doesn't scroll.
I can only scroll through the page when I click in blank spaces. Any idea of how to do it?
Thanks.
<ScrollView>
<TextInput onChangeText={email => this.setState({email})} label={ I18n.t("contactEmail") }/>
<TextInput onChangeText={email => this.setState({email})} label={ I18n.t("contactEmail") }/>
<TextInput onChangeText={email => this.setState({email})} label={ I18n.t("contactEmail") }/>
<TextInput onChangeText={email => this.setState({email})} label={ I18n.t("contactEmail") }/>
</ScrollView>
I had the same problem and after searching for a while no answer helped me; so I solved it myself by putting a <TouchableWithoutFeedback /> over each <TextInput> and sending the touch event back to the <TextInput />:
<View>
<TextInput ref ={(ref)=>this.textInput = ref}>
<TouchableWithoutFeedback style={{position: 'absolute', top:0, bottom:0, left:0, right:0}}
onPress={()=>this.textInput.focus()}/>
</View>
You can create a custom component which wraps TextInput like that and use them in your ScrollViews.
I had solve the problem like this:
<TouchableOpacity
activeOpacity={1}
style={{ flex: 1 }}
onPress={() => this.textInput.focus()} >
<View
style={{ flex: 1 }}
pointerEvents="none" >
<TextInput
ref={(ref) => this.textInput = ref}
style={{ fontSize: 14, color: '#666666', textAlign: 'right', flex: 1 }}
placeholder={this.props.placeHolder}
defaultValue={this.props.defaultValue ? this.props.defaultValue + '' : ''}
placeholderTextColor='#aaaaaa'
keyboardType={this.props.keyboardType ? this.props.keyboardType : 'default'}
secureTextEntry={this.props.isSecret}
onChangeText={this._onChangeText.bind(this)} />
</View>
</TouchableOpacity>