I am currently trying to implement a kind of 'statistics' overlay page.
I have the following code so far:
<View style={styles.container}>
<MapView
style={styles.map}
...
>
<MapView.Polygon
...
>
</MapView.Polygon>
<MapView.Marker coordinate={{latitude: 47.366965, longitude: 8.545102}}>
<View style={styles.radius}>
<View style={styles.marker}></View>
</View>
</MapView.Marker>
**THIS PART**
<View style={{flex: 1, flexDirection: 'row', justifyContent: 'space-between', bottom: 0}}>
<View style={{width: 100, height: 50, backgroundColor: 'powderblue'}} />
<View style={{width: 100, height: 50, backgroundColor: 'skyblue'}} />
<View style={{width: 100, height: 50, backgroundColor: 'steelblue'}} />
</View>
**THIS PART**
</MapView>
<Fab
direction="up"
containerStyle={{ marginLeft: 10 }}
style={{ backgroundColor: '#5067FF' }}
position="bottomRight">
</Fab>
</View>
Now the three containers I get are at the top; how can I focus them to the bottom?
Related
I am trying to write a signup form and its loading screen modal.
For some reason the modal is not vertically and horizontally align
<View style={{flex: 1,flexDirection: 'column',alignItems: 'center'}}>
<View>
<Text>Something</Text>
<Text>Something</Text>
<Text>Something</Text>
<Text>Something</Text>
<Text>Something</Text>
<TouchableOpacity style={styles.button} onPress={() => alert('hello')}>
<Text style={styles.button_text}>CREATE YOUR NEW ACCOUNT</Text>
</TouchableOpacity>
</View>
<View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
<Modal
animationType="slide"
transparent={true}
visible={modalVisible}
onRequestClose={() => {
Alert.alert('Modal has been closed.');
setModalVisible(!modalVisible);
}}>
<View
style={{width: 300, height: 300, backgroundColor: 'red'}}></View>
</Modal>
</View>
</View>
Can someone help please, here is how current situation is,
I want the modal to horizontally and vertically align in the screen
Try this
<Modal
animationType="slide"
transparent={true}
visible={modalVisible}
onRequestClose={() => {
Alert.alert('Modal has been closed.');
setModalVisible(!modalVisible);
}}>
<View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
<View style={{width: 300, height: 300, backgroundColor: 'red'}}>
...other components you need
</View>
</View>
</Modal>
I have problem on css of react native, I don't know how can I implement 2 icon connect with dash, Really don't know what this called on react native, is this stepper?. I already have sample component, the main problem is how to achieve this dashes with icons.
Here is the the example:
My Actual Output:
Sample Code:
<View style={{ justifyContent: 'flex-end', flex: 1, padding: 20 }}>
<Card style={{ justifyContent: 'center', borderRadius: 20, elevation:4}}>
<CardItem>
<Left>
<Body>
<View style={{flexDirection:'row', padding:20}}>
<View style={{flexDirection:'row'}}>
</View>
<View style={{flexDirection:'column',flex:1}}>
<Text style={{alignSelf:'center', color:'#000', fontWeight:'bold', fontSize:17}} adjustsFontSizeToFit numberOfLines={2}>Pick Up Request {'\n'}</Text>
<Item inlineLabel last>
<Text style={{fontSize:14}}>US Rt 11, Evans Mills NY 13637. 901 Route 110 </Text>
</Item>
<Text>{'\n'}</Text>
<Item inlineLabel last>
<Text style={{fontSize:14}}>Farmingdale NY 11735. 2400 Route 9{'\n'}</Text>
</Item>
</View>
</View>
<View style={{flexDirection:'row'}}>
<View style={{flexDirection:'row',flex:1, justifyContent:'space-around'}}>
<Button small primary title="Message" >
<Text>Message</Text>
</Button>
<Button small warning title="Fetch" >
<Text>Fetch</Text>
</Button>
<Button small light title="Cancel" >
<Text>Cancel</Text>
</Button>
</View>
</View>
</Body>
</Left>
</CardItem>
</Card>
</View>
Working Example: Expo Snack
import * as React from 'react';
import { Text, View, StyleSheet } from 'react-native';
import Constants from 'expo-constants';
import { Card, CardItem, Item, Left, Body, Button } from 'native-base';
export default function App() {
return (
<View style={styles.container}>
<View style={{ justifyContent: 'flex-end', flex: 1, padding: 20 }}>
<Card
style={{ justifyContent: 'center', borderRadius: 20, elevation: 4 }}>
<CardItem>
<Left>
<Body>
<View style={{ flexDirection: 'row', padding: 20 }}>
<View
style={{
flexDirection: 'column',
flex: 1,
justifyContent: 'space-between',
}}>
<View
style={{
position: 'absolute',
left: -25,
top: 50,
zIndex: 200,
}}>
<DotTrail />
</View>
<Text
style={{
alignSelf: 'center',
color: '#000',
fontWeight: 'bold',
fontSize: 17,
}}
adjustsFontSizeToFit
numberOfLines={2}>
Pick Up Request {'\n'}
</Text>
<Item inlineLabel last>
<Text style={{ fontSize: 14 }}>
US Rt 11, Evans Mills NY 13637. 901 Route 110{' '}
</Text>
</Item>
<Text>{'\n'}</Text>
<Item inlineLabel last>
<Text style={{ fontSize: 14 }}>
Farmingdale NY 11735. 2400 Route 9{'\n'}
</Text>
</Item>
</View>
</View>
<View style={{ flexDirection: 'row' }}>
<View
style={{
flexDirection: 'row',
flex: 1,
justifyContent: 'space-around',
}}>
<Button small primary title="Message">
<Text>Message</Text>
</Button>
<Button small warning title="Fetch">
<Text>Fetch</Text>
</Button>
<Button small light title="Cancel">
<Text>Cancel</Text>
</Button>
</View>
</View>
</Body>
</Left>
</CardItem>
</Card>
</View>
</View>
);
}
function DotTrail() {
return (
<>
<Dot radius={10} color={'green'} />
<View>
<Dot radius={3} color={'grey'} backgroundColor={'grey'} margin={5} />
<Dot radius={3} color={'grey'} backgroundColor={'grey'} margin={5} />
<Dot radius={3} color={'grey'} backgroundColor={'grey'} margin={5} />
</View>
<Dot radius={10} color={'red'} />
</>
);
}
function Dot({ color, radius, backgroundColor = null, margin }) {
return (
<View
style={{
width: radius * 2,
height: radius * 2,
borderWidth: 2,
borderColor: color,
borderRadius: radius,
marginRight: 10,
alignSelf: 'center',
backgroundColor: backgroundColor,
margin: margin,
}}></View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
paddingTop: Constants.statusBarHeight,
backgroundColor: '#ecf0f1',
padding: 8,
marginBottom: 3,
},
});
I'll show you how u can make it from scratch:
Just replace your icon with these simple characters i did use here!
const MyCustomInputs = ({message, duration}) => {
const [showNotification, setShowNotification] = React.useState(false)
return (
<div style={{position:"relative",width:200, height:50, display:"flex", flexDirection:"column", justifyContent:"space-between"}}>
<div style={{width:200,display:"flex", justifyContent:"space-between"}}>
<MyInputIcon color="orange"/>
<input type="text"/>
</div>
<MyDashes content={"..."}/>
<div style={{width:200,display:"flex", justifyContent:"space-between"}}>
<MyInputIcon color="green"/>
<input type="text"/>
</div>
</div>
)
}
const MyInputIcon = ({color}) => <div style={{color}}>O</div>
const MyDashes = ({content}) => <div style={{position:"absolute",top:17,left:1,writingMode: "vertical-rl"}}>{content}</div>
ReactDOM.render(
<MyCustomInputs />
,document.getElementById("react")
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<div id="react"></div>
Hello there guys
i have a problem with CSS in react native, i want to fit all my components in the screen without ScrollView but i cant seem to figure out what is my problem(i tried to change values for margins or paddings but it will look different in every device.)
As you can see at the attached image:
As you can see the graph below is not in the screen, i need to scroll view to the graph(which i dont want)
here is the code + css : (I dropped some lines to shorten the code(Like the carousel components and etc)
<View style={{ backgroundColor: "#fff" , flex: 1 }}>
<LinearGradient
colors={["#4c669f", "#3b5998", "#192f6a"]}
start={[0, 0]}
end={[1, 0]}
>
<View style={{ marginHorizontal: 20, paddingVertical: 48 }}>
<View style={styles.imageContainer}>
<View>
<View style={styles.check}>
<Ionicons name="md-checkmark" size={20} color={colors.pink} />
</View>
<Image
source={require("../assets/profile-pic.jpeg")}
style={{
width: 100,
height: 100,
borderRadius: 32,
}}
/>
</View>
</View>
<View style={[styles.center, { marginVertical: 12 }]}>
<Text style={styles.title}>
{currentUser.name + " " + currentUser.lastName}
</Text>
<Text style={[styles.subTitle, { marginTop: 8 }]}>
{businessDetails.bussinesName}
</Text>
</View>
</View>
</LinearGradient>
<View style={styles.container}>
<View style={styles.statContainer}>
<Text style={styles.statNumber}>1,700₪</Text>
<Text style={styles.stat}>הכנסה חודשית תופיע כאן</Text>
</View>
</View>
<View style={styles.center}>
<Text style={styles.textGraphTitle}>Graphs Analysis:</Text>
</View>
<View>
</View>
</View>
);
CSS:
center: {
alignItems: "center",
justifyContent: "center",
},
imageContainer: {
alignItems: "center",
justifyContent: "center",
marginTop: 1,
shadowColor: colors.darkBg,
shadowOffset: { height: 3, width: 1 },
shadowOpacity: 0.5,
},
container: {
paddingVertical: 24,
paddingHorizontal: 32,
marginBottom: 8,
backgroundColor: colors.lightBg,
flexDirection: "row",
justifyContent: "space-between",
marginHorizontal: 16,
borderRadius: 16,
marginTop: -48,
},
statContainer: {
alignItems: "center",
justifyContent: "center",
flex: 1,
},
You are asking responsive app design. Basically, you can use for width and height percentages or dimension.
import { Dimensions} from 'react-native'
const {width, height} = Dimensions.get('window')
One more approach is to use react-native-screens library
Scroll view does not scroll, only shows first three items, the rest are lost.
<View style={styles.container}>
<ScrollView horizontal contentContainerStyle={{ flexGrow: 1 }}>
<View style={{ width: "33%" }}>
<TouchableOpacity style={styles.child}>
<Text>B1</Text>
</TouchableOpacity>
</View>
<View style={{ width: "33%" }}>
<TouchableOpacity style={styles.child}>
<Text>B2</Text>
</TouchableOpacity>
</View>
<View style={{ width: "33%" }}>
<TouchableOpacity style={styles.child}>
<Text>B3</Text>
</TouchableOpacity>
</View>
<View style={{ width: "33%" }}>
<TouchableOpacity style={styles.child}>
<Text>B4</Text>
</TouchableOpacity>
</View>
<View style={{ width: "33%" }}>
<TouchableOpacity style={styles.child}>
<Text>B5</Text>
</TouchableOpacity>
</View>
</ScrollView>
</View>
Here are the styles I am using
const styles = StyleSheet.create({
container: {
height: "10%",
width: "75%",
backgroundColor: "transparent",
borderRadius: 5,
borderTopWidth: 1,
borderBottomWidth: 1,
borderColor: "lightsteelblue",
display: "flex",
flexDirection: "row",
overflow: "hidden",
},
child: {
backgroundColor: "transparent",
flex: 1,
alignItems: "center",
justifyContent: "center",
},
});
I have already tried several of the solutions offered here on other posts and have not found a solution. Any contructive, good hearted criticism is welcome, thanks for your time.
This is how I can able to scroll, I've changed some css's, you can change as per your requirements
<View style={{flex: 1}}>
<ScrollView horizontal>
<View style={{flex: 1}}>
<TouchableOpacity style={styles.child}>
<Text>B1</Text>
</TouchableOpacity>
</View>
<View style={{flex: 1}}>
<TouchableOpacity style={styles.child}>
<Text>B2</Text>
</TouchableOpacity>
</View>
<View style={{flex: 1}}>
<TouchableOpacity style={styles.child}>
<Text>B3</Text>
</TouchableOpacity>
</View>
<View style={{flex: 1}}>
<TouchableOpacity style={styles.child}>
<Text>B4</Text>
</TouchableOpacity>
</View>
<View style={{flex: 1}}>
<TouchableOpacity style={styles.child}>
<Text>B5</Text>
</TouchableOpacity>
</View>
</ScrollView>
</View>
const styles = StyleSheet.create({
container: {
height: '50%',
backgroundColor: 'transparent',
borderRadius: 5,
borderTopWidth: 1,
borderBottomWidth: 1,
flexDirection: 'row',
},
child: {
backgroundColor: 'transparent',
width: 200,
height: 100,
alignItems: 'center',
justifyContent: 'center',
},
});
Here is a snack with your code that works.
https://snack.expo.io/#waheed25/horizontal-scroll-working-
Remove that flexGrow property and put width with respect to the device or a number and don't use percentage there as it was taking the width from the container.
or simply replace this code with your code.
<View style={styles.container}>
<ScrollView horizontal>
<View style={{ width: 100 }}>
<TouchableOpacity style={styles.child}>
<Text>B1</Text>
</TouchableOpacity>
</View>
<View style={{ width: 100 }}>
<TouchableOpacity style={styles.child}>
<Text>B2</Text>
</TouchableOpacity>
</View>
<View style={{ width: 100 }}>
<TouchableOpacity style={styles.child}>
<Text>B3</Text>
</TouchableOpacity>
</View>
<View style={{ width: 100 }}>
<TouchableOpacity style={styles.child}>
<Text>B4</Text>
</TouchableOpacity>
</View>
<View style={{ width: 100}}>
<TouchableOpacity style={styles.child}>
<Text>B5</Text>
</TouchableOpacity>
</View>
</ScrollView>
</View>
My text component doesn't align when the text is more than 2 lines (see screenshot). I have tried playing around with alignment and ellipsizeMode but none of the settings change anything. Why is the 2nd line indented?
My code:
<View style={{ flex: 4, flexDirection: 'row', marginTop: 10}}>
<View style={{ flex: 1, alignItems: 'flex-end' }}>
<CircleIndicator style={{marginRight: 29}} />
<View
style={{
width: 4,
height: '100%',
backgroundColor: styles.colors.lipstick,
marginRight: 35,
}}
/>
</View>
<View style={{ flex: 2 }}>
<View style={{ flex: 1 }}>
<Text weight='bold' color='darkIndigo'> {activityType} </Text>
</View>
<View style={{ flex: 1 }}>
<Text color='blueyGrey' style={{opacity: 0.5}}> {activityDate}
</Text>
</View>
<View style={{ flex: 1, marginBottom: 30 }}>
<Text color='blueyGrey'> {activityDescription} </Text>
</View>
</View>
<View style={{ flex: 1 }} >
<Text weight='bold' color='lipstick'> {activityPoints} PTS </Text>
</View>
</View>
So I left this issue alone for a couple of days and revisited it. The reason for the misalignment was this:
<Text color='blueyGrey'> {activityDescription} </Text>
Changed it to:
<Text color='blueyGrey'>{activityDescription}</Text>
Such a rookie mistake :D