I have created a react native project using react navigation.I have put a picture as a ImageBackground in root component.In android it works fine but in iOS it shows the root component background image but with transparent stack navigators.
<SafeAreaView style={{ flex: 1 }}>
<ImageBackground
source={Assets.bgImage}
style={{
width: '100%',
height: '100%'
}}
>
<Wrapper>{children}</Wrapper>
</ImageBackground>
</SafeAreaView>
{
initialRouteName: 'SignIn',
mode: 'card',
headerMode: 'none',
transparentCard: true,
transitionConfig: () => ({
containerStyle: {
backgroundColor: 'transparent'
}
}),
/* The header config from HomeScreen is now here */
defaultNavigationOptions: {
headerStyle: {
backgroundColor: 'transparent'
},
headerTintColor: '#fff',
headerTitleStyle: {
fontWeight: 'bold',
fontSize: 15
}
}
}
anyone has idea about this issue?
Related
I need to make the list of items touchable in a flatlist, but have no idea how to make the individual components touchable so i can access the id of that flatlist item. I need to handle the onPress so I can use react navigation 5 to send the users to a different screen.
I'm using an array of data to create a card like component that renders in the flatlist.
how do I make the individual list items touchable?
here's what I'm working with:
import * as React from "react";
import { View, StyleSheet, FlatList, SafeAreaView } from "react-native";
import BigButton from "../components/BigButton.js";
import HomeScreenImage from "../components/HomeScreenImage.js";
import HomeCard from "../components/Card";
const homeOptions = [
{
name: "Beast shedule",
body: "Create and manage your workout shedule",
image: require("../assets/images/DoubleBis.jpg"),
id: "1",
},
{
name: "Pre-Made Workouts",
body: "Use one of our pre-made workouts",
image: require("../assets/images/ChickA.jpg"),
id: "2",
},
{
name: "Statistics",
body: "Analyse your personal statistics",
image: require("../assets/images/WorkoutInProgress.jpg"),
id: "3",
},
{
name: "History",
body: "Keep track of your workout history",
image: require("../assets/images/ChickH.jpg"),
id: "4",
},
];
const HomeScreen = (props) => {
return (
<View style={Styles.containerTop}>
<View>
<HomeScreenImage style={Styles.top} />
<View style={Styles.top}>
<BigButton title="Train & Track" />
</View>
</View>
<SafeAreaView style={Styles.flatListContainer}>
<FlatList
data={homeOptions}
renderItem={({ item }) => {
return <HomeCard info={item} />;
}}
keyExtractor={(homeOption) => homeOption.id}
showsVerticalScrollIndicator={false}
/>
</SafeAreaView>
</View>
);
};
const Styles = StyleSheet.create({
containerTop: {
flex: 1,
backgroundColor: "#3E3636",
},
top: {
flex: 1,
height: "1%",
alignItems: "center",
justifyContent: "center",
},
flatListContainer: {
flex: 1,
},
});
export default HomeScreen;
import React from "react";
import { View, Text, StyleSheet, Dimensions, Image } from "react-native";
const HomeCard = (props) => {
return (
<View style={Styles.container}>
<View style={Styles.cardContainer}>
<Image style={Styles.imageStyle} source={props.info.image} />
<View style={Styles.infoStyle}>
<Text style={Styles.titleStyle}>{props.info.name}</Text>
<Text style={Styles.bodyTextStyle}>{props.info.body}</Text>
</View>
</View>
</View>
);
};
const deviceWidth = Math.round(Dimensions.get("window").width);
const offset = 25;
const radius = 20;
const Styles = StyleSheet.create({
container: {
width: deviceWidth - 20,
marginTop: 20,
},
cardContainer: {
margin: 10,
width: deviceWidth - offset,
backgroundColor: "#000",
height: 200,
borderRadius: radius,
shadowColor: "#000",
shadowOffset: {
width: 5,
height: 5,
},
shadowOpacity: 0.75,
shadowRadius: 5,
elevation: 3,
},
imageStyle: {
height: 130,
width: deviceWidth - 25,
borderTopLeftRadius: radius,
borderTopRightRadius: radius,
opacity: 0.95,
},
titleStyle: {
color: "#F5EDED",
textAlign: "center",
fontSize: 20,
fontWeight: "800",
},
bodyTextStyle: {
fontWeight: "200",
color: "#F5EDED",
textAlign: "center",
},
infoStyle: {
marginHorizontal: 10,
marginVertical: 1,
},
});
export default HomeCard;
You can wrap your card with some touchable component, like TouchableOpacity for example, with naviagtion.navigate('routeName', {params}) function on onPress prop.
const HomeCard = (props) => {
return (
<TouchableOpacity onPress={() => navigation.navigate('ReceiverRoute', {image: props.info image, name: props.info.name })}> ///etc any parameters you want
<View style={Styles.container}>
<View style={Styles.cardContainer}>
<Image style={Styles.imageStyle} source={props.info.image} />
<View style={Styles.infoStyle}>
<Text style={Styles.titleStyle}>{props.info.name}</Text>
<Text style={Styles.bodyTextStyle}>{props.info.body}</Text>
</View>
</View>
</View>
</TouchableOpacity>
);
};
and then you navigate to a component that can receive some params.
For a cleaner example you can look into docs. The main idea is just wrapping your card into some touchable with onpress navigation. For the navigation prop, you can either pass it to your card from parent component, or use useNavigation hook
I'm trying to fit my background image to cover the whole app but its not, even though i've tested most of similar threads here so any help is appreciated.
I've made some changes to the original source and added an arrow towards the left edge of the image that i was hoping to have at the edge when i open up the EXPO app on my phone, but i only see a few pixels of the arrow at the left edge.
**app.js**
function HomeScreen() {
return (
<ImageBackground source={require('./assets/bgImage.jpg')} style={styles.bgImage}>
<View>
<Text>Home Screen</Text>
</View>
</ImageBackground>
);
}
bgImage: {
flex: 1,
width: null,
height: null,
resizeMode: 'cover',
justifyContent: 'center',
alignItems: "center"
}
try this :-
import React from 'react';
import { ImageBackground, View, Text } from 'react-native';
const HomeScreen = () => {
return (
<ImageBackground source={require('../assets/apple.jpg')}
style={{
position: "absolute",
top: 0,
left: 0,
bottom: 0,
right: 0,
flex: 1,
alignItems: "center"
}}>
<View style={{
width: '90%',
height: 200,
backgroundColor: "red",
justifyContent: "center",
alignItems: "center",
}}>
<Text>Home Screen</Text>
</View>
</ImageBackground>
);
}
export default HomeScreen;
It is working fine.
I am using tcomb-form-native version 0.6.15 for form validation in react-native Version0.55.4 . When I use password field text should be hidden inside dots. As per docs I used secureTextEntry and set it to true but it is still showing the data like a simple text. I found some suggestion to use temple but i don't know how to use them.
Below is the Form code
const Form = t.form.Form;
t.form.Form.stylesheet.controlLabel.normal = {color: 'white'}
console.log(t.form.Form.options)
const User = t.struct({
name: t.String,
email: t.String,
password: t.String,
});
const formStyles = {
...Form.stylesheet,
formGroup: {
normal: {
marginBottom: 10,
color: 'white'
},
},
controlLabel: {
normal: {
fontSize: 12,
marginBottom: 7,
fontWeight: '600',
},
// the style applied when a validation error occours
error: {
color: 'red',
fontSize: 18,
marginBottom: 7,
fontWeight: '600',
},
},
};
const options = {
order: ['name', 'email', 'password' ],
fields: {
name: {
placeholder: 'Enter Name',
error: 'Name is empty?',
},
email: {
placeholder: 'Enter Email',
error: 'Email is empty?',
},
password: {
placeholder: 'Enter Password',
error: 'Password is empty?',
secureTextEntry: true,
template: (locals) => textbox(locals, )//here i can use template but don't know how
},
},
stylesheet: formStyles,
};
class SignupScreen extends Component{
static navigationOptions = {
header: null
};
constructor(props) {
super(props);
this.state = {
name: '',
email: '',
password: '',
dateOfBirth: '',
};
}
onSubmit(){
const value = this._form.getValue();
console.log('value: ', value);
}
render(){
console.log(this.state.dateOfBirth)
return(
<ImageBackground
source={require('../../images/splash_screen.jpg')}
style={{flex: 1}}
>
<View style={styles.container}>
<View style={{flex:3, justifyContent: 'center', alignItems: 'center'}}>
<Image source={require('../../images/big_transparent_logo.png')} />
<Text style={styles.subtitleStyle}>Get free drink everyday</Text>
</View>
<View style={{ flex: 7, justifyContent: 'flex-start', alignSelf: 'center', alignItems: 'center', width: '80%'}}>
<View style={{width: '100%', paddingHorizontal: 10, paddingVertical: 10 , backgroundColor: 'rgba(0,0,0,0.6)'}}>
<Form ref={c => (this._form = c)} type={User} />
<TouchableOpacity style={{width: '100%', marginVertical: 10}} >
<Label title="BIRTHDAY" />
<DatePicker
style={{width: '100%'}}
date=''
mode="date"
placeholder={this.state.dateOfBirth}
format="DD-MM-YYYY"
maxDate="2002-06-01"
confirmBtnText="Confirm"
cancelBtnText="Cancel"
showIcon={true}
androidMode='spinner'
customStyles={{
dateInput: {
marginLeft: 0,
borderWidth: 0,
textAlign: 'left',
color: 'white',
backgroundColor: '#f2f2f2',
paddingVertical: 0,
height: 30,
color: 'black'
}
// ... You can check the source to find the other keys.
}}
onDateChange={(date) => {this.setState({dateOfBirth: date})}}
/>
</TouchableOpacity >
<Button block bordered light
style={{ width: '47%', borderRadius: 5, alignSelf: 'center', height: 50}}
onPress={this.onSubmit.bind(this)}
>
<Text style={{color: 'white'}}>Sign Up</Text>
</Button>
<Button block light
style={{ width: '47%', borderRadius: 5, alignSelf: 'center', height: 50, backgroundColor: 'rgba(0,0,0,0)',}}
onPress={()=>this.props.navigation.goBack()}
>
<Text style={{color: 'white'}}>Back</Text>
</Button>
</View>
</View>
</View>
</ImageBackground>
);
}
}
export { SignupScreen };
Your form is not connected to the options variable. Call options in your form tag as in below.
<Form ref={c => (this._form = c)}
type={User}
options={options} //set form options
/>
It should work without a template.
password: {
password: true,
secureTextEntry: true}
}
React Native Animation does not scale. Animation is bigger. My code:
import { DangerZone } from 'expo';
const { Lottie } = DangerZone;
Styles:
animationContainer: {
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',z
},
View:
<Lottie
ref={(animation) => {
this.animation = animation;
}}
resizeMode="contain"
loop={Boolean(true)}
style={{
width: 300,
height: 30,
backgroundColor: '#ccc',
}}
source={this.state.animation}
/>
App screenshot
I don`t know why this does not work. Please help me
For some reason when I put Text inside Image it stops wrapping. I've tried flexWrap: 'wrap' but it doesn't help.
Here is how it looks like
If I put the Text outside of Image than it works OK.
Here is the code:
class wraptest extends Component {
render() {
return (
<View style={styles.container}>
<Image
source={require('./image.jpg')}
style={styles.image}>
<View style={styles.textContainer}>
<Text style={styles.text}>Text goes here.</Text>
</View>
</Image>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
},
image: {
flex: 1,
resizeMode: 'cover',
justifyContent: 'center',
},
textContainer: {
backgroundColor: 'transparent',
alignItems: 'center',
},
text: {
fontSize: 40,
fontWeight: 'bold'
}
});
I've also pushed full project here https://github.com/OleksandrBezhan/react-native-text-wrap-test
The reason the text wraps when it is outside of the image is because it is a direct child of the "container" style which defines the flex box. Try putting flex: 1 on either the textContainer or text styles.