React Native View - react-native

Hello I am new to react native and i am having problems with the view. I am having trouble with the text input as it only shows very small. When i
remove the container in the StyleSheet All Text disappears and the text inputs become big.
Here is my code
render() {
return (
<View style={styles.container}>
<Text style={styles.welcome}>
Welcome to React Native!
</Text>
<Text style={styles.instructions}>
To get started, edit index.android.js
</Text>
<Text style={styles.instructions}>
Double tap R on your keyboard to reload,{'\n'}
Shake or press menu button for dev menu
</Text>
<View>
<View style ={styles.textinput}>
<TextInput
keyboardType='ascii-capable'
placeholder='First Name'
value={this.state.firstName}
onChangeText={(text) => {this.setState({firstName: text})}}/>
<TextInput
keyboardType='ascii-capable'
placeholder='Middle Name'
value={this.state.middleName}
onChangeText={(text) => {this.setState({middleName: text})}}/>
<TextInput
keyboardType='ascii-capable'
placeholder='Last Name'
value={this.state.lastName}
onChangeText={(text) => {this.setState({lastName: text})}}/>
<TextInput
keyboardType='ascii-capable'
placeholder='Email'
value={this.state.email}
onChangeText={(text) => {this.setState({email: text})}}/>
<TextInput
keyboardType='ascii-capable'
placeholder='Address'
value={this.state.address}
onChangeText={(text) => {this.setState({address: text})}}/>
</View>
<View style={styles.buttonModal}>
<Button
style={styles.cancelButton}
onPress={this.editUser}
title="SAVE"
color="#343434"
accessibilityLabel="Save user."/>
</View>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
textinput: {
flex: 0,
},
buttonModal: {
paddingTop: 20,
flexDirection: 'row',
justifyContent: 'space-around'
},
});

Remove <view> above <View style ={styles.textinput}> and make
textinput: {
flex: 1,
}
for button, try by commenting flexDirection: 'row',justifyContent: 'space-around' one by one.

Related

Change a vector icon colour when pressed, React Native

I have started to learn React Native recently, to try and build an application. I am trying to change the colour of the social media icons when the user clicks on them. I have manged to direct to a link when pressed but failed to change the colour.
Index.js
const SocialMedia = () => {
return (
<View style={styles.container}>
<Pressable
onPress={() =>{ Linking.openURL('https://www.facebook.com/frogsystems')
;
}}>
<Icon style={styles.social} name="facebook-f" size={30} color="#900" />
</Pressable>
<Pressable
onPress={() =>{ Linking.openURL('https://www.linkedin.com/company/frog-systems-ltd/')
;
}}>
<Icon style={styles.social} name="linkedin" size={30} color="#900" />
</Pressable>
<Pressable
onPress={() =>{ Linking.openURL('https://twitter.com/frogsystemsltd')
;
}}>
<Icon style={styles.social} name="twitter" size={30} color="#900" />
</Pressable>
</View>
)
}
export default SocialMedia;
styles.js
import { StyleSheet } from "react-native";
const styles = StyleSheet.create({
container: {
flexDirection: 'row',
padding: 50,
justifyContent: 'center',
alignItems: "center",
},
social:{
color:'white',
padding:20,
alignItems: 'center',
},
});
export default styles;
Add pressed to change vector icon color when pressed
<Pressable
onPress={() =>{ Linking.openURL('https://www.facebook.com/frogsystems')
;
}}>
{({ pressed }) => (
<Icon
style={[
{
color: pressed ? '#D6D6D6' : '#343434'
},
styles.social,
]}
name="facebook-f"
size={30}
/>
)}
</Pressable>
Remove color from styling
social:{
padding:20,
alignItems: 'center',
},

1st index hidden Item not hidding when swiping the another element - swiperFlatList React native

as you can see in the image, I have implemented adding Text inputs dynamically with the button press, everything is working perfectly only the 1st text input hidden item (Remove Button) not hiding when swiping the other text inputs.
const initialState = {
col1: '',
key: 0,
};
const [inputField, setInputField] = useState<Values[]>([initialState]);
<SwipeListView
data={inputField}
renderItem={data => renderItem(data)}
renderHiddenItem={data => renderHiddenItem(data)}
leftOpenValue={55}
rightOpenValue={-100}
disableRightSwipe={true}
ListHeaderComponent={
<View style={[styles.headingContainer]}>
<Text style={[styles.headingText]}>{Props.inputHeading}</Text>
</View>
}
ListFooterComponent={
<View style={styles.buttonContainer}>
<TouchableOpacity
style={styles.addBtn}
activeOpacity={0.7}
onPress={onPressAddBtn}>
<Text style={styles.BtnText}>Add</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.submitBtn} activeOpacity={0.7}>
<Text style={styles.BtnText}>Submit</Text>
</TouchableOpacity>
</View>
}
style={{height: Dimensions.get('screen').height / 1.3}}
/>
const renderItem = (data: any) => {
return (
<TouchableHighlight key={data.item.key}>
<TextInput
placeholder="Hello"
onChangeText={e => handleChange(data.item.key, 'col1', e)}
value={data.item.col1}
style={[styles.textInput, Props.textInputStyle]}
// {...Props.textInputProps}
/>
</TouchableHighlight>
);
};
const renderHiddenItem = (rowData: any) => {
return (
<View
style={{
justifyContent: 'flex-end',
flexDirection: 'row',
alignItems: 'center',
}}>
<TouchableOpacity
activeOpacity={0.7}
style={{
backgroundColor: 'red',
justifyContent: 'center',
flexDirection: 'row',
width: 90,
height: 45,
alignItems: 'center',
borderRadius: 5,
}}>
<Text style={{color: 'white'}}>Remove</Text>
</TouchableOpacity>
</View>
);
};
but other all element's swipe is working as expected only the first element is not working as expected
found solution by adding keyExtractor={item => item.key.toString()} to swiper flatlist.

Problem with my navigator in a class component

everyone,
I'm want to create a button which redirects to another view but it doesn't work. All my views are defined in homeStack.js:
const screens= {
LoginPage: {
screen: Login,
navigationOptions: {
headerShown: false
},
},
RegisterPage: {
screen: Register,
navigationOptions: {
headerShown: false
},
},
DetailsPage: {
screen: Details,
navigationOptions: {
headerShown: false
},
},
}
const HomeStack = createStackNavigator(screens);
export default createAppContainer(HomeStack);
Now I have a login class component containing different functions including:
renderLoginform(){
return (
<View style={{ flex: 1, backgroundColor: '#FC8686', justifyContent: 'center' }}>
<View style={{flex: 6, backgroundColor: 'white', borderBottomLeftRadius: 30, borderBottomRightRadius: 30, }}>
<SafeAreaView style={{alignItems: 'center', flex: 1, alignItems: 'center'}}>
<Text style={{fontSize: 40, flex: 1}}>Sign In</Text>
<View style={style.formContainerStyle}>
<View style={style.fieldStyle}>
<TextInput
placeholder="username"
autoCorrect={false}
autoCapitalize="none"
onChangeText={this.onUsernameChange.bind(this)}
style={style.textInputStyle}
textAlign={'center'}
/>
</View>
<View style={style.fieldStyle}>
<TextInput
secureTextEntry
autoCapitalize="none"
autoCorrect={false}
placeholder="password"
onChangeText={this.onPasswordChange.bind(this)}
style={style.textInputStyle}
textAlign={'center'}
/>
</View>
</View>
<View style={style.buttonzone}>
<View style={style.buttonContainerStyle}>
{this.renderButton()}
</View>
<View style={style.buttonContainerStyle}>
</View>
**<Button
title='Go to Register'
onPress={this.props.navigation.navigate('RegisterPage')}></Button>**
</View>
</SafeAreaView>
</View>
</View>
);
}
The last element of the code is a button whose click should link to my RegisterPage. But it won't work. What's wrong ?
This function is then called in the render return of the Login class.
Thanks for your help.
Try using this way
onPress={() => this.props.navigation.navigate('RegisterPage')}

React Native - Moving up screen in TextInput with KeyboardAvoidingView

I have a view with some TextInputs, and some of them are in the bottom part of the screen. The thing is I want the screen to move up when I click on them to that way I can see what I'm writing. I searched a lot but nothing works for me, I have my view nested in a KeyboardAvoidingView but nothing happens when I click on the TextInput. Here's my code:
<KeyboardAvoidingView
keyboardVerticalOffset={64}
style={{ flex: 1 }}
>
<View style={styles.screen}>
<TouchableWithoutFeedback onPress={Keyboard.dismiss}>
<TextInput
value={title}
onChangeText={text => setTitle(text)}
style={styles.singleLineTextInput}
placeholder="Title"
/>
<TextInput
value={keywords}
onChangeText={text => setKeywords(text)}
style={styles.singleLineTextInput}
placeholder="Keywords"
/>
<TextInput
value={description}
onChangeText={text => setDescription(text)}
style={{ ...styles.singleLineTextInput, ...styles.descriptionTextInput }}
placeholder="Description"
multiline={true}
autoFocus={true}
/>
</TouchableWithoutFeedback>
</View>
</KeyboardAvoidingView >
And my styles:
const styles = StyleSheet.create({
screen: {
flex: 1,
padding: 16,
alignItems: 'center'
},
singleLineTextInput: {
width: DEVICE_WIDTH * 0.8,
borderColor: 'black',
borderBottomWidth: 2,
fontSize: 16,
paddingHorizontal: 16
},
descriptionTextInput: {
maxHeight: DEVICE_HEIGHT / 4
}
});
I'm using React-Navigation and I tried changing keyboardVertialOffset and behavior to multiples values but nothing happens. Any ideas?
Thanks in advance
Import Content from native-base as
import { Content } from 'native-base';
And import platform from react-native
import { Platform } from 'react-native';
And use content and platform in your code like this:
<KeyboardAvoidingView
behavior={Platform.Os == "ios" ? "padding" : "height"}
style={{ flex: 1 }}
><Content>
<View style={styles.screen}>
<TouchableWithoutFeedback onPress={Keyboard.dismiss}>
<TextInput
value={title}
onChangeText={text => setTitle(text)}
style={styles.singleLineTextInput}
placeholder="Title"
/>
<TextInput
value={keywords}
onChangeText={text => setKeywords(text)}
style={styles.singleLineTextInput}
placeholder="Keywords"
/>
<TextInput
value={description}
onChangeText={text => setDescription(text)}
style={{ ...styles.singleLineTextInput, ...styles.descriptionTextInput }}
placeholder="Description"
multiline={true}
autoFocus={true}
/>
</TouchableWithoutFeedback>
</View>
</Content>
</KeyboardAvoidingView>
Hope this helps!

How to fix keyboard from hiding input fields in React Native

I’m setting up a new component,
and the keyboard covers the fields
This is for a new component
<KeyboardAwareScrollView enableOnAndroid={true} extraScrollHeight={50} enableAutomaticScroll={true}>
<View style={{ paddingHorizontal: 20 }}>
<View>
<FloatingLabelInput
onRef={(ref) => {
this.inputs['firstName'] = ref
}}
onSubmitEditing={() => {
this.focusNextField('lastName')
}}
label={i18n.t('t_driver_registration_first_name_label')}
onChangeText={(text) => this.onChangeInputText('firstName', text)}
keyboardType='default'
maxLength={20}
value={form.firstName}
labelStyle={Style.inputLabel}
basicColor={GStyle.GREEN}
inputTextColor={Color(GStyle.BLACK).alpha(.7)}
editable={mode !== DriverFormMode.EDIT}
/>
I expect the keyboard will not cover my fields.
Wrap your view in this to scroll automatically on input focus. Do:
<KeyboardAvoidingView style={{ flex: 1, flexDirection: 'column',justifyContent: 'center',}} behavior="padding" enabled keyboardVerticalOffset={100}>
<ScrollView>
<View style={Styles.row}>
//your view
</View>
</ScrollView>
</KeyboardAvoidingView>
<View style={Styles.row}> This is just a Stylesheet e.g. Create a new StyleSheet:
const Styles = StyleSheet.create({
row: {
borderRadius: 4,
borderWidth: 0.5,
borderColor: '#d6d7da',
},
title: {
fontSize: 19,
fontWeight: 'bold',
},
activeTitle: {
color: 'red',
},
});
Use a StyleSheet:
<View style={Styles.row}>
<Text style={[Styles.title, this.props.isActive && styles.activeTitle]} />
</View>