keep keyboard open when clicks out of TextInput react native - react-native

I have problem with keyboard, when i click the button to show password the TextInput get blur, and hide the keyboard.
i want to keep keyboard open when the button clicks.
i have found a workaround it works well with ios but doesn't work with android? is it a public problem?
what should i do?
<View>
<TextInput ref={inputRef} secureTextEntry={secure} style={styles.input} {...rest} />
<TouchableWrapper style={styles.secureTextWrapper} onPress={_handleSecureTextEntryChange}>
secure ? 'show' : 'hide'
</TouchableWrapper>
</View>

This is how I did my password input, I created a container representing the TextInput with some borders. Inside the container a title and passwordContainer.
passwordContainer:
TextInput
TouchableOpacity with the icons
<SafeAreaView style={styles.inputContainer}>
<Text style={styles.titleInput}>{title}</Text>
<View style={styles.textContainer}>
<Ionicons name={iconLeft} size={22} color="#1F2341" />
<TextInput
style={styles.textInput}
placeholder={placeholder}
onChangeText={propertyChange}
placeholderTextColor="#3f4783"
secureTextEntry={secureText}
enablesReturnKeyAutomatically
value={value}
/>
<TouchableOpacity onPress={onSecurePress}>
<Ionicons name={iconRight} size={22} color="rgba(31, 35, 65, 0.7)" />
</TouchableOpacity>
</View>
</SafeAreaView>;
onSecurePress:
onSecurePress={() => setSecureText(!secureText)}
style:
const styles = StyleSheet.create({
inputContainer: { marginBottom: 15 },
textContainer: {
backgroundColor: "rgba(255,255,255,0.8)",
alignItems: "center",
flexDirection: "row",
height: 50,
paddingLeft: 10,
//borderWidth: 4,
borderRadius: 15,
borderWidth: 0.5,
borderColor: "rgba(0,0,0,0.2)",
marginHorizontal: 20,
marginVertical: 5,
shadowOffset: { height: 2, width: 2 },
shadowColor: "black",
shadowOpacity: 0.1,
},
titleInput: {
marginHorizontal: 20,
marginVertical: 5,
paddingLeft: 10,
color: "#6E6E6E",
},
textInput: {
width: "80%",
padding: 10,
},
errorContainer: { marginLeft: "10%" },
errorMessage: {
color: "#e74d3c",
fontFamily: "MontserratItalic",
},
});

Related

Unable to scroll even after using Scrollview

This is my code and below you can find the image where I am not able to scroll.
I have tried using scrollview and also tried dimensions and also tried adding view tag in the top but still not working. What should I do to overcome this behavior? I am not able to fix it and tried many hours fixing it but still not able to achieve the scroll.
const data = useContext(BlogContext);
const singleBlog = data.filter((blog) => blog.title === route.params.title);
return (
<View style={styles.container}>
<ScrollView contentContainerStyle={styles.outer}>
{singleBlog.length > 0 &&
singleBlog.map((blog) => (
<View key={Math.random()}>
<Image source={{ uri: blog.image }} style={styles.blogImage} />
<Text style={styles.title}>{blog.title}</Text>
<View style={styles.authorAndDate}>
<Text style={styles.author}>
<Text style={{ fontWeight: "500" }}>Wriiten by: </Text>
{blog.author === null ? "unknown" : blog.author}
</Text>
<Text style={styles.date}>
{new Date(blog.published_at).toDateString()}
</Text>
</View>
<Text style={styles.description}>{blog.description}</Text>
</View>
))}
{/* <StatusBar style="light" /> */}
</ScrollView>
</View>
);
};
const styles = StyleSheet.create({
blogImage: {
width: "100%",
height: "40%",
marginBottom: 5,
},
title: {
fontFamily: "Poppins_600SemiBold",
textTransform: "capitalize",
fontSize: 40,
fontWeight: "600",
paddingHorizontal: 10,
},
authorAndDate: {
flexDirection: "row",
justifyContent: "space-between",
marginHorizontal: 10,
borderBottomColor: "#BDBDBD",
borderBottomWidth: 1,
paddingBottom: 10,
marginBottom: 10,
},
author: {
fontFamily: "Poppins_500Medium",
textTransform: "capitalize",
fontSize: 18,
fontWeight: "700",
color: "#434343",
},
date: {
color: "#878787",
fontFamily: "Poppins_500Medium",
textTransform: "capitalize",
fontWeight: "500",
fontSize: 14,
},
description: {
color: "#555555",
fontFamily: "Poppins_400Regular",
fontWeight: "400",
paddingHorizontal: 10,
fontSize: 20,
lineHeight: 31,
},
container: {
flexGrow: 1,
borderColor: "red",
borderWidth: 4,
},
outer: {
flex: 1,
// borderColor: "red",
borderWidth: 4,
},
inner: {
flexGrow: 1,
},
});
export default SingleBlogScreen;
enter image description here
In this Image, I am not able to scroll.
I have found the solution for the above issue
changing the blogImage height from 60% -> 600
fixed the issue and now scroll is working
thanks to #wojtek2939 for helping....

Text in Button doesn't show text in ios (native base)

hi in my project I use nativeBase. I use <Button><Text>blablabla</Text></Button>
when running in android ok but when run-ios text not showing.
this is my component :
<View style={{ marginLeft: 7, flexDirection: 'column', alignItems: 'center', justifyContent: 'center' }}>
<View style={styles.btncontent}>
<Right style={{ flex: 0.2 }}>
<Image source={mapBtnLogo} style={styles.btnImage} />
</Right>
<Left style={{ flex: 0.8 }}>
<Button full transparent style={styles.btn} onPress={() => props.myProps.gotoMap([section.YPOINT, section.XPOINT])}>
<Text style={styles.btnText}>
نمایش روی نقشه
</Text>
</Button>
</Left>
</View>
</View>
and this is styles :
const styles = StyleSheet.create({
...Platform.select({
ios: {
btnImage: {
margin: 5,
marginRight: 20,
width: moderateScale(20),
height: moderateScale(20),
},
btn: {
//alignItems: 'flex-start',
width: '100%',
height: '10%',
},
btnText: {
fontFamily: 'IRANSansMobile',
fontSize: 15,
color: '#000',
},
}, android: {
btn: {
width: '100%',
height: '10%',
},
btnText: {
fontFamily: 'IRANSansMobile',
fontSize: 15,
color: '#000000'
},
btncontent: {
backgroundColor: '#59c5b8',
flexDirection: 'row-reverse',
alignItems: 'center',
borderWidth: 0.3,
borderRadius: 5,
marginLeft: 10,
width: '95%',
},
}
remove node module and install again not working.
and clear Xcode and run again but not working.
I read this post NativeBase Button doesn't show text but I don't use padding and still not showing text
You can try TouchableOpacity.
<Left style={{ flex: 0.8 }}>
<TouchableOpacity style={styles.btn} onPress={() => props.myProps.gotoMap([section.YPOINT, section.XPOINT])}>
<Text style={styles.btnText}>
نمایش روی نقشه
</Text>
</TouchableOpacity>
</Left>
I found my mistake in styling :
change height style btn in the stylesheet from 10% to 100% !!
thank

How can I get this effect in react native?

The radio button must be pair.
How can I make these 4 radio button in one group?
Hey Jin youcheng
You can use the react-native-radio-buttons-group package to implement the radio button group.
Have a look here:
import RadioGroup from 'react-native-radio-buttons-group';
export default class App extends Component {
state = {
data: [
{
label: 'Default value is same as label',
},
{
label: 'Value is different',
value: "I'm not same as label",
},
{
label: 'Color',
color: 'green',
},
{
disabled: true,
label: 'Disabled',
},
{
label: 'Size',
size: 32,
},
],
};
// update state
onPress = data => this.setState({ data });
render() {
let selectedButton = this.state.data.find(e => e.selected == true);
selectedButton = selectedButton ? selectedButton.value : this.state.data[0].label;
return (
<View style={styles.container}>
<Text style={styles.valueText}>
Value = {selectedButton}
</Text>
<RadioGroup radioButtons={this.state.data} onPress={this.onPress} />
</View>
);
}
}
Or something like this
https://github.com/moschan/react-native-simple-radio-button
Hope this will work for you :)
Thanks
If you want to do it without any third party library you can do it by making the layout and using Images of Radio Buttons(one for Selected and one for unselected) inside TouchableOpacity. You can take a variables for button and set them false for initial state. Now once you perform onPress of that particular Radio Button you can set that true. Now you can render Selected Radio Button by using Image source property. Here is the code where I have given background color to Image view as I don't have radio buttons. I also commented the source prop there which you can uncomment and pass the location of the radio buttons according to your condition.
<View style={{height: 200, marginTop:50, width: 220, borderColor: '#000000', borderWidth: 2, alignSelf: 'center'}}>
<View style={{flexDirection:'row', marginTop: 30}} >
<View style={{flexDirection:'row-reverse', width: '50%', height: 50, alignItems: 'center'}}>
<Text style={{marginRight: 5}}>Apple</Text>
<TouchableOpacity
// onPress = {() => this.selectRadioBtn}
>
<Image style={{height: 24, width: 24, backgroundColor: 'steelblue', marginRight: 5}}
// source={require('your_asset_url_her')}
/>
</TouchableOpacity>
</View>
<View style={{flexDirection:'row', width: '50%', height: 50, alignItems: 'center', marginLeft: 5}}>
<TouchableOpacity
// onPress = {() => this.selectRadioBtn}
>
<Image style={{height: 24, width: 24, backgroundColor: 'steelblue', marginRight: 5}}
// source={require('your_asset_url_her')}
/>
</TouchableOpacity>
<Text style={{marginRight: 5}}>Apple</Text>
</View>
</View>
<View style={{flexDirection:'row'}} >
<View style={{flexDirection:'row-reverse', width: '50%', height: 50, alignItems: 'center'}}>
<Text style={{marginRight: 5}}>Apple</Text>
<TouchableOpacity
// onPress = {() => this.selectRadioBtn}
>
<Image style={{height: 24, width: 24, backgroundColor: 'steelblue', marginRight: 5}}
// source={require('your_asset_url_her')}
/>
</TouchableOpacity>
</View>
<View style={{flexDirection:'row', width: '50%', height: 50, alignItems: 'center', marginLeft: 5}}>
<TouchableOpacity
// onPress = {() => this.selectRadioBtn}
>
<Image style={{height: 24, width: 24, backgroundColor: 'steelblue', marginRight: 5}}
// source={require('your_asset_url_her')}
/>
</TouchableOpacity>
<Text style={{marginRight: 5}}>Apple</Text>
</View>
</View>
<TouchableOpacity style={{height: 30, alignSelf: 'center', marginTop: 10, borderColor: '#000000', borderWidth: 2, justifyContent: 'center', alignItems: 'center'}}>
<Text style={{width: 80, alignSelf: 'center', textAlign: 'center'}}>OK</Text>
</TouchableOpacity>
</View>
Please let me know if any clarification required. Thanks :)

How to get Text or Button to register click events on top of an Expo map?

I am trying to have clickable text or a button on top of my Expo maps. My provider is google, and when I try to render text that is clickable on top of my maps it fails. The text shows up, but does not register click events. Any ideas?
Here is some code: (see at the bottom I am loading Return to home. )
<SafeAreaView style={{flex: 1, backgroundColor: HOMESCREEN_BACKGROUND}}>
<View style={styles.container}>
<StatusBar backgroundColor="blue" barStyle="light-content" />
<View style={styles.topBar}>
<Text style={styles.cityText}>
{this.state.city}, {this.state.region}
</Text>
<Text style={styles.usernameText}>
{this.props.user.uid}
</Text>
</View>
<MapView
ref={this.map}
style={styles.map} provider="google" customMapStyle={NIGHT_MAP_STYLE}
initialRegion={{
latitude: this.props.reduxMap.latitude,
longitude: this.props.reduxMap.longitude,
latitudeDelta: this.props.reduxMap.latitudeDelta,
longitudeDelta: this.props.reduxMap.longitudeDelta,
}}
showsScale={true}
showsUserLocation={true}
onChange={(event) => this.handleMapViewChange(event)}
>
{/* {this.renderRelevantQueues()} */}
<Text style={styles.returnToHome} onPress={this.snapMapViewToUser} >Return to home</Text>
</MapView>
<View style={styles.bottomBar}>
<Text style={styles.backText} onPress={() => this.handleBackButtonClicked()}>
Back
</Text>
{this.renderReturnToCurrentLocationSvg()}
</View>
</View>
</SafeAreaView>
In response to some questions about this post.
You can see the text, but you can't click it?
I can see a button or text or really whatever on top of the map. However, the click event is not firing when I physically click on the element.
what does renderReturnToCurrentLocationSvg doing ? does it render view or image that might be infront of your text layer?
This is actually commented out in my code but it renders a series of pins and radiuses around them on the map from a database. Removed the function and the issue still persists.
Can you add styles of current screen?
Yes, here they are:
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: HOMESCREEN_BACKGROUND
},
topBar: {
height: 200,
backgroundColor: HOMESCREEN_BACKGROUND,
},
map: {
flex: 1,
flexDirection: 'column'
},
returnToHome: {
color: 'white',
position: 'absolute',
fontSize: 30,
marginLeft: '30%'
},
createQueue: {
color: 'white',
marginLeft: '50%',
fontSize: 30
},
loadingTxt: {
textAlign: 'center',
fontSize: 18,
marginTop: "100%",
marginLeft: "25%",
width: 200
},
topBar: {
height: '10%',
backgroundColor: HOMESCREEN_BACKGROUND,
justifyContent: 'center',
alignItems: 'center',
borderBottomColor: 'grey',
borderBottomWidth: 1
},
bottomBar: {
height: '10%',
backgroundColor: HOMESCREEN_BACKGROUND,
flexDirection: 'row',
borderTopColor: 'grey',
borderTopWidth: 1,
},
backText: {
color: 'white',
fontSize: 30,
marginLeft: 0
},
cityText: {
color: 'white',
fontSize: 30,
},
usernameText: {
color: 'grey'
}
});

Adding margin to component changes screen layout react-native

I'm building a react-native app and I'm having a problem styling the components.
For some reason when I add a margin to one of the components the main component doesn't occupy the full height of the screen even though is "flex:1".
In this example the problem happens with the back button, if I use padding it works fine but I need to use margin so the user doesn't press the wrong component by mistake.
And the same problem happens in the rest of the app with different components that have a margin property.
Main component
body: {
flex: 1,
backgroundColor: 'green'
},
subHeader: {
backgroundColor: '#f4f4f4',
height: 95,
flexDirection: 'row'
},
vericalBar: {
width: 9
},
subHeaderDescription: {
flex: 1,
justifyContent: 'center',
marginLeft: 16
},
subHeaderLocation: {
color: '#2d2d2d',
fontSize: 14,
marginBottom: 10
},
subHeaderText: {
color: '#2d2d2d',
fontSize: 20
},
subHeaderStatus: {
alignItems: 'center',
justifyContent: 'center',
marginRight: 18
},
listDescription: {
backgroundColor: 'red',
flexGrow: 1,
paddingTop: 16,
paddingLeft: 20
},
taskDescription: {
color: '#2d2d2d',
fontSize: 16
}
<View style={localStyles.body}>
<Header navigation={this.props.navigation} />
<View style={localStyles.subHeader}>
<View style={[localStyles.vericalBar, { backgroundColor: task.color }]} />
<View style={localStyles.subHeaderDescription}>
<Text style={localStyles.subHeaderLocation}>{location.name}</Text>
<Text style={localStyles.subHeaderText}>{task.name}</Text>
</View>
{iconSelector(task)}
</View>
<BackButton navigation={this.props.navigation} />
<View style={localStyles.listDescription}>
<Text style={localStyles.taskDescription}>{task.description}</Text>
</View>
{returnStatus(task)}
<ReportIssueButton navigation={this.props.navigation} />
<Footer navigation={this.props.navigation} />
</View>
Back Button
<TouchableWithoutFeedback onPress={() => navigation.goBack()}>
<View style={localSytles.container}>
<Image style={{ width: 14, height: 14 }} source={require('../../Images/Back.png')} />
<Text style={localSytles.buttonText}>Back</Text>
</View>
</TouchableWithoutFeedback>
container: {
flexDirection: 'row',
height: 40,
paddingLeft: 20,
alignItems: 'center',
backgroundColor: 'blue'
},
buttonText: {
color: '#2d2d2d',
fontSize: 14,
marginLeft: 10
}
I've found the problem, the container "listDescription" had a "paddingTop: 16"
by removing that property it allowed the container to push the rest of the containers down.