I would like to show on the homepage of my react native app , a view that in turn shows a text element and an icon, then below these 2 I would like to show the amazon logo. I tried but it only shows me the logo.
export default class Header extends Component {
render() {
return (
<View style={{ flex: 1, flexDirection: 'row' }}>
<Text style={styles.Title}>Acquista!</Text>
<Ionicons name="ios-contact" size={42} color='red' style={{ marginTop:
65, marginLeft: 210 }} />
</View> ,
<Logo></Logo>
);
}
}
class Logo extends Component {
render() {
return (
<View>
<Image
style={{ height: 200, width: 200, marginTop: 150 }}
source={require('./assets/images/amazon.jpg')}
/>
</View>
);
}
}
Wrap everything into a View
return (
<View style={{ flex: 1 }}>
<View style={{ flex: 1, flexDirection: 'row' }}>
<Text style={styles.Title}>Acquista!</Text>
<Ionicons name="ios-contact" size={42} color='red' style={{ marginTop: 65, marginLeft: 210 }} />
</View>
<Logo />
</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 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>
Receiving syntax error, SyntaxError: Unexpected token, expected ",". It is for the third to last line ");"
I am having trouble seeing where I need to insert the ",". I have tried in front of the ); and after. No luck. This is while I was adding the code for google sign in for ios. Would appreciate any assistance.
render() {
LayoutAnimation.easeInEaseOut();
const scrollEnabled = this.state.screenHeight > height;
return (this.state.logedin ?
<View style={styles.container}>
<StatusBar barStyle="light-content"></StatusBar>
<ScrollView
style={{ flex: 1 }}
contentContainerStyle={styles.scrollview}
scrollEnabled={scrollEnabled}
onContentSizeChange={this.onContentSizeChange}
>
<ImageBackground source={require("/Users/carloscraig/NoExcusasRN/screens/assets/grassbcg2.png")}
style={{ width: '100%', height: '100%' }}>
<Image source={require("/Users/carloscraig/NoExcusasRN/screens/assets/noexlogo.png")}
style={styles.logo}>
</Image>
<Text style={styles.greeting}>{'BIENVENIDO!'}</Text>
<View style={styles.errorMessage}>
{this.state.errorMessage && <Text style={styles.error}>{this.state.errorMessage}</Text>}
</View>
<View style={styles.form}>
<View>
<Text style={styles.inputTitle}>correo electrónico</Text>
<TextInput
style={styles.input}
autoCapitalize="none"
onChangeText={email => this.setState({ email })}
value={this.state.email}
></TextInput>
</View>
<View style={{ marginTop: 32 }}>
<Text style={styles.inputTitle}>contraseña</Text>
<TextInput
style={styles.input}
secureTextEntry
autoCapitalize="none"
onChangeText={password => this.setState({ password })}
value={this.state.password}
></TextInput>
</View>
</View>
<TouchableOpacity style={styles.button} onPress={this.handleLogin}>
<Text style={{ color: "#FFF", fontWeight: "500" }}>Iniciar Sesión</Text>
</TouchableOpacity>
<SafeAreaView style={{
flex: 1,
justifyContent: 'center'
}}>
<Image style={{
width: 300,
height:300,
justifyContent: 'center',
alignSelf: 'center'
}} source={{uri: this.state.photo}} />
<Text>{this.state.name}</Text>
<Text>{this.state.email}</Text>
</SafeAreaView>:
<SafeAreaView style={{
flex: 1,
justifyContent: 'center',
alignItems: 'center'
}}>
<GoogleSigninButton
style={{ width: 192, height: 48 }}
size={GoogleSigninButton.Size.Wide}
color={GoogleSigninButton.Color.Light}
onPress={this._signIn}
disabled={this.state.isSigninInProgress} />
</SafeAreaView>
<TouchableOpacity
style={{ alignSelf: "center", marginTop: 32 }}
onPress={() => this.props.navigation.navigate("Register")}
>
<Text style={{ color: "#414959", fontSize: 13 }}>
No tienes una Cuenta? <Text style={{ fontWeight: "500", color: "#E9446A" }}>Regístrate</Text>
</Text>
</TouchableOpacity>
</ImageBackground>
</ScrollView>
</View>
);
}
}
React conditional rendering
render() {
const isLoggedIn = this.state.isLoggedIn;
return (
<div>
{isLoggedIn
? <LogoutButton onClick={this.handleLogoutClick} />
: <LoginButton onClick={this.handleLoginClick} />
}
</div>
);
}
You need to add the other half (false case) to the ternary. In this case if you do not want to render anything you need to return null.
render() {
LayoutAnimation.easeInEaseOut();
const scrollEnabled = this.state.screenHeight > height;
return (this.state.logedin ?
<View style={styles.container}>
<StatusBar barStyle="light-content"></StatusBar>
<ScrollView
style={{ flex: 1 }}
contentContainerStyle={styles.scrollview}
scrollEnabled={scrollEnabled}
onContentSizeChange={this.onContentSizeChange}
>
<ImageBackground source={require("/Users/carloscraig/NoExcusasRN/screens/assets/grassbcg2.png")}
style={{ width: '100%', height: '100%' }}>
<Image source={require("/Users/carloscraig/NoExcusasRN/screens/assets/noexlogo.png")}
style={styles.logo}>
</Image>
<Text style={styles.greeting}>{'BIENVENIDO!'}</Text>
<View style={styles.errorMessage}>
{this.state.errorMessage && <Text style={styles.error}>{this.state.errorMessage}</Text>}
</View>
<View style={styles.form}>
<View>
<Text style={styles.inputTitle}>correo electrónico</Text>
<TextInput
style={styles.input}
autoCapitalize="none"
onChangeText={email => this.setState({ email })}
value={this.state.email}
></TextInput>
</View>
<View style={{ marginTop: 32 }}>
<Text style={styles.inputTitle}>contraseña</Text>
<TextInput
style={styles.input}
secureTextEntry
autoCapitalize="none"
onChangeText={password => this.setState({ password })}
value={this.state.password}
></TextInput>
</View>
</View>
<TouchableOpacity style={styles.button} onPress={this.handleLogin}>
<Text style={{ color: "#FFF", fontWeight: "500" }}>Iniciar Sesión</Text>
</TouchableOpacity>
<SafeAreaView style={{
flex: 1,
justifyContent: 'center'
}}>
<Image style={{
width: 300,
height: 300,
justifyContent: 'center',
alignSelf: 'center'
}} source={{ uri: this.state.photo }} />
<Text>{this.state.name}</Text>
<Text>{this.state.email}</Text>
</SafeAreaView>:
<SafeAreaView style={{
flex: 1,
justifyContent: 'center',
alignItems: 'center'
}}>
<GoogleSigninButton
style={{ width: 192, height: 48 }}
size={GoogleSigninButton.Size.Wide}
color={GoogleSigninButton.Color.Light}
onPress={this._signIn}
disabled={this.state.isSigninInProgress} />
</SafeAreaView>
<TouchableOpacity
style={{ alignSelf: "center", marginTop: 32 }}
onPress={() => this.props.navigation.navigate("Register")}
>
<Text style={{ color: "#414959", fontSize: 13 }}>
No tienes una Cuenta? <Text style={{ fontWeight: "500", color: "#E9446A" }}>Regístrate</Text>
</Text>
</TouchableOpacity>
</ImageBackground>
</ScrollView>
</View>
: null);
}
I wrote an application to show a large data with FlatList but when I use the application the Flatlist is not clear data out while the data array is empty.
renderItem = ({item}) => {
return (
<TouchableOpacity
onPress={() => this.props.navigation.navigate('Detail', { item, otherParam: item.Word1})}>
<View style={{ padding: 5, backgroundColor: '#eee'}}>
<View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between' }}>
<DisplayField value={item.Word1} />
</View>
<View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between' }}>
<DisplayField value={item.Word2} />
</View>
<View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between' }}>
<DisplayField value={item.Word3} />
</View>
<View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between' }}>
<DisplayField value={item.Word4} />
</View>
</View>
</TouchableOpacity>
);
};
This is a render code
render() {
return (
<View style={styles.container}>
<SearchBar lightTheme placeholder='Enter your word' onChangeText={this.onChangeTextDelayed} />
<FlatList style={styles.listContainer}
data={this.state.data}
extraData={this.state.data}
renderItem={this.renderItem}
keyExtractor={item => item.Word1}
ItemSeparatorComponent={() => (
<View
style={{ height: 1, width: '100%', backgroundColor: '#CED0CE' }}
/>
)}
/>
</View>
);
}
This is a data retrieving method
retriveData = (msg) => {
if(msg === '') {
this.setState({data:[]});
return;
}
let limStatement = '';
let sqlStatement = "SELECT Word1, Word2, Word3, Word4 FROM MyTable WHERE Word1 LIKE '%" + msg + "%' ORDER BY lower(Word2)";
db.runQuery(sqlStatement).then(rows => { this.setState({ data: rows }) });
}
So when I type for search in textbox Flatlist is showing data properly but when I remove search text it will go to this.setState({data:[]}) to clear state's data out but it happened just some row that not gone,
Example the list show
A
B
C
D
E
F
G
.
.
.
when I clear the search out, it seems like.
B
B
D
D
E
E
F
F
G
G
G
It happens when I scrolling down to far.
Any idea for this?
My code works fine on Most of iPhones but on Iphone 5 the status bar has been covered by the view, I don't know how to margin the view in Iphone 5 only if i used margin top in the view, it looks weird in other iPhones
componentWillMount() {
this.startHeaderHeight = 45
this.marginTopHeader = 0
this.iconMargin = 9
if (Platform.OS == 'android') {
this.startHeaderHeight = 30 + StatusBar.currentHeight
this.marginTopHeader = 23 + this.marginTopHeader
this.iconMargin = this.iconMargin
}
}
render() {
var width = Dimensions.get('window').width - 128;
var height = Dimensions.get('window').height;
return (
<SafeAreaView style={{
height: this.startHeaderHeight, flexDirection: 'row',
borderBottomColor: '#ddd', backgroundColor: '#3A3658', marginTop: this.marginTopHeader
}} >
<Icon
lightTheme
style={{ marginLeft: 8, marginRight: 5, marginTop: this.iconMargin, color: 'white' }} size={25} name="ios-menu" onPress={() => {
this.props.draw();
}} />
<View style={{position: 'absolute', right: 7}}>
<Icon style={{ color: '#fff',marginTop: this.iconMargin ,padding:0,}} size={25} name="ios-cart" onPress={() => {
this.props.cart();
}}>
<Text style={{color:'red', fontWeight:'bold', fontSize:10}}>{this.props.cartItemCount}</Text>
</Icon>
</View>
</SafeAreaView >
You can try to write like this.
<View style={{flex: 1, backgroundColor: 'white'}} >
{/* header */}
<View style={{paddingTop: system.ios.x ? 22 : 0}}>
<View style={{
height: Platform.select({ios: 64, android: 44}),
backgroundColor: 'white',
justifyContent: 'flex-end'
}}>
`enter code here`
</View>
</View>
</View>