I'm trying to imitate the image.
I'm having a problem with the button with the like in the middle I can not imitate it.
Since I read it seems that native react on android has a problem with overflow.
I thought you could use a:
marginTop: -25
but it does not seem to solve the problem.
Some advice?
Link expo: https://snack.expo.io/Hk1yUyzB7
Code:
import React, { Component } from 'react';
import { View, StyleSheet, Image, Text } from 'react-native';
//import ViewOverflow from 'react-native-view-overflow';
export default class App extends Component {
render() {
var account = (
<View>
<View
style={{
paddingTop: 20,
paddingLeft: 20,
flexDirection: 'row',
}}>
<Image
style={{ width: 50, height: 50, borderRadius: 25 }}
source={{
uri:
'http://www1.pictures.zimbio.com/bg/Number+Four+World+Premiere+h5-FoI0M8-gl.jpg',
}}
/>
<View
style={{
paddingLeft: 20,
}}>
<Text>Yulia James</Text>
<Text
style={{
color: '#ccc',
}}>
6 hrs ยท IIT London
</Text>
</View>
</View>
<Text
style={{
paddingTop: 20,
paddingLeft: 20,
paddingBottom: 20,
}}>
Making everyday worth it :)
</Text>
<View
style={{
paddingBottom: 20,
}}>
<Image
style={{
width: '100%',
height: 200,
}}
source={{
uri:
'http://www.wordzz.com/wp-content/uploads/2016/11/Night-Ratri.jpg',
}}
/>
</View>
</View>
);
var com = (
<View
style={{
backgroundColor: 'rgba(230,230,230,0.8)',
//height: 40,
alignItems: 'center',
//justifyContent: 'center',
padding: 5,
flex: 1,
}}>
<Text
style={{
color: '#ccc',
fontSize: 18,
}}>
Comment
</Text>
</View>
);
return (
<View
style={{
flex: 1,
backgroundColor: '#e7eff0',
}}>
<View
style={{
backgroundColor: 'rgba(255,255,255,0.8)',
marginTop: 50,
borderTopWidth: 1,
borderBottomWidth: 1,
borderColor: '#e7e7e7',
}}>
{account}
<View
style={{
backgroundColor: '#fff',
borderTopWidth: 1,
borderColor: '#ccc',
//alignItems: 'center',
//justifyContent: 'center',
}}>
<View style={styles.container2}>
{com}
<View
style={{
//backgroundColor: '#000',
borderRadius: 40,
height: 80,
width: 80,
alignItems: 'center',
justifyContent: 'center',
borderColor: '#ccc',
borderWidth: 1,
}}>
<Image
style={{
//resizeMode: 'cover',
height: 40,
width: 40,
}}
source={{
uri: 'http://i.imgur.com/k5jMsaH.gif',
}}
/>
</View>
{com}
</View>
</View>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
container2: {
flexDirection: 'row',
},
});
Related
I have a problem and would like some help. I want to create button with right arrow that moves. But unfortunately the arrow starts to move from the beginning of the button itself. I only want to move that arrow at the right side. So for now it looks like that
I think it's happening because animation is affected from button container!
So my code so far -
<TouchableOpacity
style={{
position: "absolute",
bottom: 40,
paddingVertical: 10,
paddingHorizontal: 15,
justifyContent: "center",
width: "40%",
borderRadius: 20,
flexDirection: "row",
backgroundColor: "#a12f2f",
alignItems: "center",
textAlign: "center"
}}
activeOpacity={0.9}
onPress={() => onPressNext(count)}
>
<Text style={{ fontSize: 16,color: "white", marginRight: 10,}}>
{count === 0 ? "Explain steps" : "Next step"}
</Text>
{count === 0 && (
<Animatable.View
animation={"slideInLeft"}
iterationCount={"infinite"}
>
<VectorIconComponent
size={20}
name={"arrowright"}
color={"white"}
type={ICON_TYPES.AntDesign}
/>
</Animatable.View>
)}
</TouchableOpacity>
Also I used react-native-animatable to create that animation. So my question is how can I make this animation without crossing the text?
Try this !
import React, { useEffect } from 'react'
import { Animated, SafeAreaView, View, Text, TouchableOpacity, Image, Easing } from 'react-native'
export default function App() {
const animatedValue = new Animated.Value(0)
useEffect(() => {
_start()
}, [animatedValue])
function _start() {
const toValue = 35
Animated.loop(
Animated.timing(animatedValue, {
toValue,
duration: 1000,
useNativeDriver: true
})
).start()
}
function handlePress() {
alert('ok')
}
return (
<SafeAreaView style={{ flex: 1 }}>
<View style={{ flex: 1 }}>
<TouchableOpacity
activeOpacity={0.75}
style={{ position: 'absolute', bottom: 20, height: 60, width: 200, backgroundColor: 'tan', alignSelf: 'center', borderRadius: 20, flexDirection: 'row' }}
onPress={handlePress}>
<View style={{ height: 60, width: 140, alignItems: 'center', justifyContent: 'center', }}>
<Text>
Explain Steps
</Text>
</View>
<View style={{ height: 60, width: 60, justifyContent: 'center', }}>
<Animated.View
style={{ height: 30, width: 30, transform: [{ translateX: animatedValue }] }}>
<Image
source={{ uri: 'https://cdn.iconscout.com/icon/free/png-256/right-arrow-1438234-1216195.png' }}
style={{ height: '100%', width: '100%' }}
/>
</Animated.View>
</View>
</TouchableOpacity>
</View>
</SafeAreaView>
)
}
Output
I am trying to add images to my application home page but it seems whenever I use this.props.imageUri it just doesn't show the images anymore. I tried to do it using Image source.. it works but when I created Location.js and add this.props.imageUrl the image doesn't show anymore.. so I don't know what to do.
This is my Home.js file
import React from "react";
import {
View,
Text,
Button,
SafeAreaView,
TextInput,
StatusBar,
Platform,
ScrollView,
Image,
imageUri,
StyleSheet,
} from "react-native";
import ProductsList from "../../components/productsList/ProductsList";
import { styles } from "../../styles/authStyle";
import Icon from "react-native-vector-icons/Ionicons";
import { fontSize } from "styled-system";
import Location from "../components/Location";
export default function Search({ navigation }) {
return (
<SafeAreaView style={{ flex: 1 }}>
<View style={{ flex: 1 }}>
<View
style={{
height: 80,
backgroundColor: "white",
borderBottomWidth: 1,
borderBottomColor: "#dddddd",
}}
>
<View
style={{
flexDirection: "row",
padding: 10,
backgroundColor: "white",
marginHorizontal: 20,
shadowOffset: { width: 0, height: 0 },
shadowColor: "black",
shadowOpacity: 0.2,
borderRadius: 50,
elevation: 1,
}}
>
<Icon name="ios-search" size={20} style={{ marginRight: 10 }} />
<TextInput
underlineColorAndroid="transparent"
placeholder="City, airport, adrerss, or hotel"
placeholderTextColor="grey"
style={{ flex: 1, fontWeight: "700", backgroundColor: "white" }}
/>
</View>
</View>
<ScrollView scrollEventThrottle={16}>
<View style={{ flex: 1, backgroundColor: "white", paddingTop: 20 }}>
<Text
style={{
fontSize: 24,
fontWeight: "700",
paddingHorizontal: 20,
marginLeft: 100,
}}
>
FIND YOUR RIDE
</Text>
<View style={{ height: 130, marginTop: 20 }}>
<ScrollView>
<Location
imageUri={require("../home/nicosia.png")}
name="nicosia"
/>
</ScrollView>
</View>
</View>
</ScrollView>
</View>
</SafeAreaView>
);
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: "center",
justifyContent: "center",
},
});
}
And this is Location.js
import React, { Component } from "react";
import { View, Text, StyleSheet, Image, imageUri } from "react-native";
class Location extends Component {
render() {
return (
<View
style={{
alignItems: "center",
height: 130,
width: 130,
marginLeft: 20,
borderWidth: 0.5,
borderColor: "#dddddd",
}}
>
<View style={{ flex: 2 }}>
<Image
source={this.props.imageUri}
style={{
flex: 1,
width: null,
height: null,
resizeMode: "cover",
}}
/>
</View>
<View style={{ flex: 1, paddingLeft: 3, paddingTop: 10 }}>
<Text>{this.props.name}</Text>
</View>
</View>
);
}
}
export default Location;
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: "center",
justifyContent: "center",
},
});
Set width and height to a fixed size or just omit them.
<View style={{ flex: 2 }}>
<Image
source={this.props.imageUri}
style={{
flex: 1,
{/* Don't set width and height to null */}
width: null,
height: null,
resizeMode: "cover",
}}
/>
</View>
<View style={{ flex: 1, paddingLeft: 3, paddingTop: 10 }}>
<Text>{this.props.name}</Text>
</View>
I have put an icon with the text box but its not showing in a same line,there is problem in alignment.I have tried many solutions . I am using flex Box.Any help would be appreciated.I set parent view to column and set child view in which icon and text box is going to show to row to align it in the same row but its not aligning it proper.i don't knows where the problem is occurring.
import {
View,
ImageBackground,
Text,
StyleSheet,
Image,
KeyboardAvoidingView,
TextInput,
TouchableOpacity
} from "react-native";
import React from "react";
import { AntDesign } from "#expo/vector-icons";
import { Feather } from "#expo/vector-icons";
export default function Login() {
return (
<View>
<ImageBackground
style={styles.backgroundImage}
source={require("../assets/bg_image.png")}
>
<View style={styles.container}>
<Image source={require("../assets/ic_logo.png")} />
<Text style={styles.welcomeText}>Welcome to SMACC</Text>
<KeyboardAvoidingView behavior="position">
<View style={styles.loginInfo}>
<View style={styles.inputField}>
<Text>User Name</Text>
<View style={styles.inputText}>
<AntDesign style={styles.icon} name="user" />
<TextInput placeholder="Enter User Name Here" />
</View>
</View>
<View
style={{
borderBottomColor: "#999999",
borderBottomWidth: 1
// marginTop: 12.5
}}
/>
<View style={styles.inputField}>
<Text>Password</Text>
<View style={styles.inputText}>
<Feather style={styles.icon} name="lock" />
<TextInput placeholder="Enter Password Here" />
</View>
</View>
<View style={styles.loginButton}>
<TouchableOpacity>
<Text style={styles.loginButtonText}>Login</Text>
</TouchableOpacity>
</View>
</View>
</KeyboardAvoidingView>
<View>
<Text style={styles.forgetPasswordLink}>Foget Password ?</Text>
</View>
</View>
</ImageBackground>
</View>
);
}
let styles = StyleSheet.create({
container: {
flex: 1,
flexDirection: "column",
justifyContent: "center",
alignItems: "center"
},
backgroundImage: {
width: "100%",
height: "100%"
},
welcomeText: {
paddingVertical: 20,
fontSize: 15,
fontFamily: "Roboto-Medium"
},
loginInfo: {
backgroundColor: "#FFFFFF",
shadowColor: "#000",
shadowOffset: { width: 0, height: 1 },
shadowOpacity: 0.8,
shadowRadius: 2,
elevation: 5,
borderRadius: 5,
height: 165,
width: 253
},
inputField: {
flex: 1,
paddingTop: 10,
marginLeft: 20,
//fontSize: 10,
color: "#999999",
fontFamily: "Roboto-Medium"
},
inputText: {
flexDirection: "row",
//flex:0.5,
//marginLeft: 20,
fontSize: 12,
color: "#000000",
fontFamily: "Roboto-Medium"
},
loginButton: {
flex: 0.6,
alignItems: "center",
justifyContent: "center",
backgroundColor: "#1968B3",
borderBottomLeftRadius: 5,
borderBottomRightRadius: 5
},
loginButtonText: {
color: "#FFFFFF",
fontFamily: "Roboto-Medium",
fontSize: 12
},
forgetPasswordLink: {
paddingTop: 10,
fontFamily: "Roboto-Medium",
fontSize: 12,
color: "#333333"
},
icon: {
paddingRight: 5
//paddingTop:7
}
});
Try this as inputText style
inputText: {
flexDirection: 'row',
justifyContent:'space-between',
alignItems:'center',
fontSize: 12,
color: '#000000',
fontFamily: 'Roboto-Medium',
},
feel free for doubts..
Can you try adding display: 'flex' to the css and see if that works?
inputText: {
display: 'flex',
flexDirection: "row",
//flex:0.5,
//marginLeft: 20,
fontSize: 12,
color: "#000000",
fontFamily: "Roboto-Medium"
}
I animate my view up 120 pixels when the keyboard opens for a Modal I have. When the keyboard closes, the view returns 120 pixels down. The problem is, the area that goes off screen at the top, when it gets animated back, the view is slightly smaller, and it gets slightly smaller each time, Here is the code - I will put a comment to show the view that is shrinking:
<Animated.View
style={{
paddingTop: 5,
paddingBottom: 10,
paddingLeft: 10,
paddingRight: 10,
marginTop: this.state.yPosition,
marginBottom: this.state.yPositionPositive,
flex: 1,
marginLeft: (Dimensions.get('window').width - 300) / 4,
backgroundColor: 'rgba(0,0,0,0.8)',
width: 300,
borderRadius: 4,
borderWidth: 0,
}}>
<View style={{ flexDirection: 'column', justifyContent: 'space-between', flex: 1 }}>
<View style={{height: 126, backgroundColor: 'blue', alignItems: 'stretch'}}>
<ScrollView contentContainerStyle={{flexGrow:1}} style={{flexDirection: 'column', backgroundColor: '#e6fffe'}}>
<View style={{height: 90, backgroundColor: 'red', flexDirection: 'row', justifyContent: 'center', alignItems: 'center', paddingTop: 5, paddingBottom: 5, borderBottomColor: '#6de3dc', borderBottomWidth: 0}}>
<View style={{justifyContent: 'center', alignItems: 'center', flex: 0.5}}>
<View style={{flexDirection: 'column', justifyContent: 'space-between'}}>
<Image
source={require('../assets/billythekid2.jpg')}
style={{height: 60, width: 60, marginTop: Platform.OS === 'ios' ? 10 : 10, borderColor: '#6de3dc', borderWidth: 2, borderRadius: 30}}
/>
<View style={{flexDirection: 'row', justifyContent: 'center', alignItems: 'center', marginTop: 5}}>
<Ionicons
name='ios-star'
color='#eec400'
size={14}
/>
<Ionicons
name='ios-star'
color='#eec400'
size={14}
/>
<Ionicons
name='ios-star'
color='#eec400'
size={14}
/>
<Ionicons
name='ios-star'
color='#eec400'
size={14}
/>
<Ionicons
name='ios-star'
color='#eec400'
size={14}
/>
</View>
</View>
</View>
<View style={{flexDirection: 'column', backgroundColor: '#e6fffe', marginTop: Platform.OS === 'ios' ? 10 : 10, flex: 0.5}}>
<View style={{flexDirection: 'row', flex: 0.5}}>
<View style={{flex: 0, alignSelf: 'center'}}>
<Text style={{fontSize: 16, fontWeight: '700'}}>
eamon.white
</Text>
</View>
</View>
</View>
</View>
<View style={{flex: 0, marginBottom: 5, backgroundColor: '#e6fffe'}}>
<Text
style={{
width: 280,
flex: 0,
backgroundColor: '#e6fffe',
paddingLeft: 5,
borderWidth: 0,
borderRadius: 4,
color: '#000',
fontSize: 14,
}}>
{this.state.messageFromSender}
</Text>
</View>
</ScrollView>
</View>
<View style={{flex: 1}} onLayout={(event) => {
this.setState({height: event.nativeEvent.layout.height});
}}>
<TouchableWithoutFeedback onPress={Keyboard.dismiss}>
<View style={{ flexDirection: 'column', flex: 1 }}>
<Text
style={{
flex: 0,
width: Dimensions.get('window').width,
color: 'white',
fontWeight: '700',
marginTop: 5,
marginBottom: 5
}}>
Date(s) Needed:
</Text>
{this.showCalendar()}
</View>
</TouchableWithoutFeedback>
<View style={{ flex: 0, marginBottom: 10, justifyContent: 'center', flexDirection: 'column', marginTop: 0 }}>
<TextInput
style={{
width: 280,
borderColor: 'gray',
borderWidth: 1,
backgroundColor: '#ffffff',
paddingLeft: 5,
borderRadius: 4,
height: this.state.height - 313
}}
onChangeText={text => this.setState({ message: text })}
value={this.state.message}
multiline={true}
numberOfLines={2}
onFocus={this.animateUp}
placeholder='Type a message...'
/>
</View>
</View>
<View style={{ flex: 0.1, borderRadius: 4, borderWidth: 0, marginBottom: 10 }}>
<TouchableOpacity
activeOpacity={1}
style={{
backgroundColor: this.state.rentButtonBackground,
flex: 1,
justifyContent: 'center',
alignItems: 'center',
width: 280,
borderRadius: 4,
borderWidth: 0,
}}
onPress={() => {
}}>
<Text
style={{
backgroundColor: this.state.rentButtonBackground,
textAlign: 'center',
color: 'white',
fontWeight: '900',
fontSize: 18,
borderRadius: 4,
borderWidth: 0,
}}>
RESPOND
</Text>
</TouchableOpacity>
</View>
<View style={{ flex: 0.1, borderRadius: 4, borderWidth: 0, marginBottom: 10 }}>
<TouchableOpacity
activeOpacity={1}
style={{
backgroundColor: this.state.rentButtonBackground,
flex: 1,
justifyContent: 'center',
alignItems: 'center',
width: 280,
borderRadius: 4,
borderWidth: 0,
}}
onPress={() => {
}}>
<Text
style={{
backgroundColor: this.state.rentButtonBackground,
textAlign: 'center',
color: 'white',
fontWeight: '900',
fontSize: 18,
borderRadius: 4,
borderWidth: 0,
}}>
ACCEPT
</Text>
</TouchableOpacity>
</View>
<View style={{ flex: 0.1, borderRadius: 4, borderWidth: 0 }}>
<TouchableOpacity
activeOpacity={1}
style={{
backgroundColor: this.state.rentButtonBackground,
flex: 1,
justifyContent: 'center',
alignItems: 'center',
width: 280,
borderRadius: 4,
borderWidth: 0,
}}
onPress={() => {
}}>
<Text
style={{
backgroundColor: this.state.rentButtonBackground,
textAlign: 'center',
color: 'white',
fontWeight: '900',
fontSize: 18,
borderRadius: 4,
borderWidth: 0,
}}>
DECLINE
</Text>
</TouchableOpacity>
</View>
</View>
</Animated.View>
Animations:
animateUp = () => {
Animated.parallel([
Animated.timing(this.state.yPosition, {
toValue: -120,
duration: 300,
}),
Animated.timing(this.state.yPositionPositive, {
toValue: 120,
duration: 300,
})
]).start();
}
Animated.parallel([
Animated.timing(this.state.yPosition, {
toValue: 0,
duration: 1,
}),
Animated.timing(this.state.yPositionPositive, {
toValue: 0,
duration: 1,
})
]).start()
It starts out like this:
Each time the keyboard opens and closes, and the animation happens, pushing the top of the modal off the screen, the ScrollView shrinks a little - until it ends up looking like this:
Any suggestions would be great.
If you need to animate a view when the keyboard opens, use KeyboardAvoidingView:
https://facebook.github.io/react-native/docs/keyboardavoidingview
I have a MapView, with a text above it:
<View style={{ height: 310, alignItems: 'center', marginBottom: 10 }}>
<MapView style={ { height: 300, width: 350, } } initialRegion= .. >
<View style={{ height: 60, backgroundColor: 'rgba(255,255,255,0.7)' , flexDirection: 'column'}}>
<View style={{flexDirection: 'row'}} >
<Text style={{ fontSize: 20, color: 'black' }}> {this.state.title} </Text>
</View>
<View style={{flexDirection: 'row'}}>
<Text style={{ marginTop: 5, fontSize: 15, color: 'black', marginRight: 13}}> {this.state.startLoc.name} </Text>
<Text style={{ marginTop: 5, fontSize: 15, backgroundColor: 'transparent', color: 'black' }}> {buildTimeString(new Date(this.state.startDate))} </Text>
<Text style={{ marginTop: 5, fontSize: 15, backgroundColor: 'transparent', color: 'black' }}> {getDistanceOneToOne(this.state.startLoc, this.state.destinationLoc).distance} </Text>
</View>
</View>
..
</View>
Sometimes it displays the two texts (lines) right, but most of the times it displays them wrong (bot above each other):
What could be the issue?