I'm building the react native project.
This code works well on Android but doesn't work well on ios.
if I touch the first half of the button, it works, but touch doesn't work on the end of the button.
<View style={{backgroundColor: 'red', position: 'absolute', bottom: 0, alignSelf: 'center', width: 300}}>
<TouchableOpacity onPress={()=>{console.log('clicked!');}>
<View style={{flex: 1, backgroundColor: 'blue', width: 300}}>
<Text style={{flex: 1, backgroundColor: 'green', width: '100%', textAlign: 'center'}}>
Click Me!
</Text>
</View>
</TouchableOpacity>
</View>
Related
I'm trying to show a flatList in tvOS and when the flatlist is rendered it shows unwanted space at the top of the rendered items inside the flatlist. This issue is not happening in Android TV or Fire TV.
My code :
<SafeAreaView
style={{
flex: 1,
backgroundColor: Colors.APP_BACKGROUND,
flexDirection: 'row',
}}>
<View style={{width: '27%'}}>
<View
style={[{flex: 1, marginLeft: Platform.OS === 'android' ? '10%' : '5%', marginRight: '10%', marginTop: '10%'}]}>
<Text
style={[
{
fontSize: FontSize.large,
color: Colors.WHITE,
fontFamily: FontFamily.bold,
marginBottom: '5%',
paddingHorizontal: ms(10),
marginLeft: Platform.OS === 'android' ? ms(5) : ms(2),
},
]}>
Settings
</Text>
<FlatList
data={pages}
renderItem={({item, index}) => renderSettingItem(item, index)}
removeClippedSubviews={false}
/>
</View>
</View>
<View
style={{
backgroundColor: Colors.SEPARATOR_SETTING_PAGE,
width: 3,
marginTop: '2%',
height: '60%',
}}
/>
<View style={{width: '73%'}}>
<SettingPageComponent page={page} />
</View>
</SafeAreaView>
I don't know what I did wrong. I'd really appreciate some help. Thanks !
I'm created a PDF file using react-pdf/renderer. Everything is working great, but my image is sideways. When using an img tag it is shown correctly. I've tried searching and I find thoughts like onLoadSuccess check the rotate property? But I don't know how to do that using this library.
Here is my code:
<Document>
<Page size="A4" style={styles.page}>
<View style={styles.section}>
<View
style={{
width: "100%",
alignContent: "center",
justifyContent: "center",
padding: "10pt",
backgroundColor: "gray",
color: "white",
fontSize: "20pt",
fontWeight: "bold",
margin: 0,
}}
>
<Text style={{textAlign: "center", marginBottom: "5pt"}}>
Profile stuff here
</Text>
<Text style={{fontSize: "14pt", textAlign: "center"}}>
More profile stuff
</Text>
</View>
<View
style={{
margin: "40pt",
alignSelf: "center",
justifyContent: "center",
display: "flex",
flexDirection: "row",
flexWrap: "wrap",
}}
>
{report?.image && (
<Image
style={{
alignSelf: "center",
margin: "5pt",
maxWidth: "400pt",
maxHeight: "400pt",
width: "auto",
height: "auto",
border: 1,
}}
src={report.image}
/>
)}
</View>
</View>
</Page>
</Document>
The image comes from Firebase and is correctly displayed when I look at it there. I think it has something to do with the image taken in landscape or portrait mode, but then I am lost.
Thank you for any advice.
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'm trying to make a custom header component with an icon that can either toggle the navigation drawer or navigate the user back (or anywhere), the button is working fine on Android but doesn't seem to register the onPress on iOS.
I tried playing with position absolute and relative but the issue persisted.
//Component code
const HeaderArrow: React.FC<Props> = (props) =>{
return(
<View style={[styles.HeaderContainer, props.HeaderStyle]}>
<Icon name={props.iconName} size={35} color={props.iconColor} onPress={() => props.navigateMeBack()}/>
<View style={{position: 'relative', top: 0, left: 0, right: 0, bottom: 0, justifyContent: 'center', alignItems: 'center'}}>
<Text style={[styles.TextStyle, props.TextEdited]}>
{props.HeaderText}
</Text>
</View>
</View>
)
}
const styles = EStyleSheet.create({
HeaderContainer:{
flexDirection: 'row',
backgroundColor: '#f8f8f8',
alignItems: 'center',
width: WIDTH,
paddingVertical: '5rem',
marginHorizontal: '5rem',
},
TextStyle:{
fontSize: '18rem',
fontWeight: 'bold',
textAlign: 'center',
color: Colors.mainHeader,
}
})
// Main screen code<HeaderArrow
HeaderText={'Sign up (1 of 2)'}
HeaderStyle={{backgroundColor: 'red'}}
TextEdited={GlobalStyles.headerTextStyle}
navigateMeBack={() => backToLogin()}
iconName={'arrow-left'}
iconColor={Colors.mainForeGround}
/>
You can use this way
<TouchableOpacity onPress={() => props.navigateMeBack()} >
<Icon
name={props.iconName}
size={35}
color={props.iconColor}
/>
</TouchableOpacity>
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'>