I am attempting to make the images scroll horizontally. I downloaded some UI, and added ScrollView horizontal. But instead of it looking the same just with the ability to scroll horizontally, it shrank the image (and also gave it the ability to scroll horizontally). What should I change to make it stretch all the way across (still with the padding)?
Posts.js
import React from "react";
import {
View,
Text,
Image,
ImagBackground,
ImageBackground,
} from "react-native";
import Icon from "#expo/vector-icons/Entypo";
import { ScrollView, TouchableOpacity } from "react-native-gesture-handler";
export default class Posts extends React.Component {
state = {
liked: false,
};
onLike = () => {
this.setState({ liked: !this.state.liked });
};
render() {
const { name, profile, photo, onPress } = this.props;
return (
<View>
<View
style={{
flexDirection: "row",
paddingTop: 25,
alignItems: "center",
}}
>
<View style={{ width: "20%" }}>
<Image
source={profile}
style={{
width: 45,
height: 45,
borderRadius: 13,
}}
/>
</View>
<View
style={{
width: "60%",
}}
>
<Text
style={{
fontFamily: "Bold",
fontSize: 14,
color: "#044244",
}}
>
{name}
</Text>
<Text
style={{
fontFamily: "Medium",
fontSize: 12,
color: "#9ca1a2",
}}
>
2 mins ago
</Text>
</View>
<View
style={{
width: "20%",
alignItems: "flex-end",
}}
>
<Icon name="sound-mix" color="#044244" size={20} />
</View>
</View>
<View
style={{
flexDirection: "row",
width: "100%",
paddingTop: 20,
}}
>
<ScrollView horizontal>
<ImageBackground
source={photo}
style={{
width: "100%",
height: 220,
}}
imageStyle={{
borderRadius: 30,
}}
>
<View
style={{
height: "100%",
flexDirection: "row",
alignItems: "flex-end",
justifyContent: "flex-end",
}}
>
<TouchableOpacity
onPress={onPress}
style={{
marginBottom: 20,
borderRadius: 5,
padding: 5,
backgroundColor: "#e8e8e8",
}}
>
<Icon name="forward" color="#044244" size={20} />
</TouchableOpacity>
<TouchableOpacity
onPress={this.onLike}
style={{
marginBottom: 20,
borderRadius: 5,
padding: 5,
backgroundColor: "#e8e8e8",
marginLeft: 10,
marginRight: 20,
}}
>
<Icon
name={
this.state.liked === true ? "heart" : "heart-outlined"
}
color={this.state.liked === true ? "red" : "#044244"}
size={20}
/>
</TouchableOpacity>
</View>
</ImageBackground>
</ScrollView>
</View>
</View>
);
}
}
Here's me adding more words because the post doesn't have enough words on it's own. When will they finally remove this pointless feature? I feel as if I clearly expressed my question with the few words I used.
I believe your issue is with your View wrapping your ScrollView. There is no need of wrapping ScrollView, that too in row, due to which the remaining space is visible. Just define the ScrollView, and it would work just fine. Give a width of 100% to your ScrollView though.
For any sort of styling to the parent for the ScrollView, do it inside the ScrollView itself, like the way I did in the code.
Please note ScrollView accepts a list of child items, currently I see only a single item, if you've intentionally added this one, then it is fine, else, you need to refactor your code surely. This won't work out for you.
// PLEASE NOTE --> Commented Lines should be removed, and
// only ScrollView should be considered with the styling specified
// <View
// style={{
// flexDirection: "row",
// width: "100%",
// paddingTop: 20,
// }}
// >
<ScrollView horizontal
style={{
width: '100%',
marginTop: 20,
paddingLeft: 16,
paddingRight: 6
}}>
<ImageBackground
source={photo}
style={{
width: "100%",
height: 220,
marginRight: 10
}}
imageStyle={{
borderRadius: 30,
}}
>
<View
style={{
height: "100%",
flexDirection: "row",
alignItems: "flex-end",
justifyContent: "flex-end",
}}
>
<TouchableOpacity
onPress={onPress}
style={{
marginBottom: 20,
borderRadius: 5,
padding: 5,
backgroundColor: "#e8e8e8",
}}
>
<Icon name="forward" color="#044244" size={20} />
</TouchableOpacity>
<TouchableOpacity
onPress={this.onLike}
style={{
marginBottom: 20,
borderRadius: 5,
padding: 5,
backgroundColor: "#e8e8e8",
marginLeft: 10,
marginRight: 20,
}}
>
<Icon
name={
this.state.liked === true ? "heart" : "heart-outlined"
}
color={this.state.liked === true ? "red" : "#044244"}
size={20}
/>
</TouchableOpacity>
</View>
</ImageBackground>
</ScrollView>
// </View>
i have create a sign in form where i'm taking username and password as input. the issue in on simulator i m able to insert password and its visible as encrypt(black dots) but when i create a build password input is showing blank input and keyboard is not opening.
Versions:
"react": "16.13.1"
"react-native": "~0.63.4"
custom input component
const BorderedTextInputWithIcon = React.forwardRef((props, ref = null) => (
<View style={{ width: "100%" }}>
{props.icon && (
<Icon
name={props.icon}
size={20}
color={Colors.CYAN}
style={{ position: "absolute", left: 10, top: 30, zIndex: 1 }}
/>
)}
<TextInput
{...props}
style={{ ...styles.textInput, ...props.style }}
ref={ref}
placeholderTextColor={Colors.LIGHT_GRAY}
/>
{props.rightIcon && (
<Icon
name={props.rightIcon}
size={18}
color={Colors.WHITE}
style={{
position: "absolute",
right: 30,
top: 35,
zIndex: 1,
color: Colors.CYAN,
borderRadius: 20,
padding: 3,
}}
/>
)}
</View>
));
<BorderedTextInputWithIcon
ref={(ref) => (this.password = ref)}
keyboardType="default"
placeholder="Password"
style={styles.input}
icon="eye"
secureTextEntry={true}
value={password}
onChangeText={(value) => this.handleOnChange("password", value)}
onSubmitEditing={this.onSubmit}
/>
calling as this in sign in screen
in iOS, a white line will appear when pulling up the <ScrollView> with refreshControl, anyone knows the reasons?
<ScrollView
removeClippedSubviews={true}
showsVerticalScrollIndicator={false}
refreshControl={
<RefreshControl
refreshing={props.listViewState.pullToRefresh}
onRefresh={handleOnRefresh}
/>
}
contentContainerStyle={{backgroundColor: 'white'}}
>
<View> ... </View>
<View> ... </View>
</ScrollView>
white line appears
I had the same issue with Flatlist.
Try something like this.
return (
<SafeAreaView style={styles.container}>
<View style={styles.container2}/>
<FlatList
data={DATA}
renderItem={renderItem}
keyExtractor={item => item.id}
contentContainerStyle={{ backgroundColor: 'white' }}
ListHeaderComponent={<View>
<Text style={{backgroundColor:'#293541'}}>HEADER</Text></View>}
refreshControl={
<RefreshControl
refreshing={refreshing}
onRefresh={onRefresh}
tintColor={'red'}
backgroundColor={'#293541'}
/>
}
/>
</SafeAreaView>
);
and for styling :
container: {
flex:1,
marginTop: StatusBar.currentHeight || 0,
backgroundColor: 'white',
},
container2: {
position: 'absolute',
top: 0,
left: 0,
width: '100%',
height: '60%',
backgroundColor: '#293541',
},
I'm looking to dismiss the keyboard when the user clicks on anywhere outside the keyboard or the input, but the keyboard is not being dismissed when I click elsewhere:
<TouchableWithoutFeedback style={styles.container} onPress={Keyboard.dismiss}>
<View style={styles.inputContainer}>
<TextInput
placeholder="Search Term"
style={styles.input}
onChangeText={setSearch}
value={search}
returnKeyType="search"
onSubmitEditing={handleSubmit}
/>
</View>
</ TouchableWithoutFeedback>
The styling is pretty standard:
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
},
inputContainer: {
position: 'absolute',
top: stackHeaderHeight + 10,
height: height * .1,
width: '100%',
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
},
You need to change your onPress code of TouchableWithoutFeedback
<TouchableWithoutFeedback style={styles.container} onPress={()=> Keyboard.dismiss()}>
</ TouchableWithoutFeedback>
Sample working code.
render() {
return (
<TouchableWithoutFeedback onPress={()=>Keyboard.dismiss()} >
<View style={{ flex: 1 }}>
<TextInput returnKeyType="search" style={{borderWidth:1,borderColor:'grey',marginTop:100,height:50,marginHorizontal:50}}/>
</View>
</TouchableWithoutFeedback>
);
}
I think you have a problem with your style properties. Please check on your container and inputcontainer style properties. If you have any ScrollView in your render method add following
<ScrollView keyboardShouldPersistTaps='always'>
When I wrap my inputs around other views, KeyboardAvoidingView seems to not work at all. Is it general case that inputs must be bare without any containers?
return (
<KeyboardAvoidingView
style={{ backgroundColor: '#fff', flex: 1 }}
behavior="padding"
>
<View style={{ paddingTop: 30, paddingBottom: 10 }}>
<Text style={styles.regularTextStyle}> Twój email </Text>
</View>
<CardInput>
<Input
label="email"
placeholder="jan.kowalski#gmail.com"
value={this.props.email}
onChangeText={text => this.props.dataUpdate({ prop: 'email', value: text })}
/>
</CardInput>
<View style={{ paddingTop: 60, paddingBottom: 10 }}>
<Text style={styles.regularTextStyle}> Adres sklepu</Text>
</View>
<CardInput>
<Input
placeholder="miasto"
value={this.props.city}
onChangeText={text => this.props.dataUpdate({ prop: 'city', value: text })}
/>
</CardInput>
<CardInput>
<Input
placeholder="ulica"
value={this.props.street}
onChangeText={text => this.props.dataUpdate({ prop: 'street', value: text })}
style={{ flex: 3 }}
/>
<Input
placeholder="nr"
value={this.props.number}
onChangeText={text => this.props.dataUpdate({ prop: 'number', value: text })}
style={{ flex: 1, marginLeft: 15 }}
/>
</CardInput>
{this.renderButton()}
<View style={{ height: 60 }} />
</KeyboardAvoidingView>
);
and after keyboard pops up, the view does not go up at all