Today i want to do something like the picture below. I want to arrange the matches so that they form these numbers. But I'm not sure if the way I did it will be responsive on different phones? I don't think so ..
My code so far is
import { StatusBar } from "expo-status-bar";
import { Image, StyleSheet, View } from "react-native";
export default function App() {
return (
<View style={styles.container}>
<StatusBar style="auto" hidden={true} />
<Image
style={{
height: 80,
width: 80,
position: "absolute",
top: "61%",
left: "10%",
transform: [{ rotate: "90deg" }],
}}
source={require("./assets/match.png")}
/>
<Image
style={{
height: 80,
width: 80,
position: "absolute",
top: "56.8%",
left: "19.8%",
transform: [{ rotate: "180deg" }],
}}
source={require("./assets/match.png")}
/>
<Image
style={{
height: 80,
width: 80,
position: "absolute",
top: "52%",
left: "10%",
transform: [{ rotate: "90deg" }],
}}
source={require("./assets/match.png")}
/>
<Image
style={{
height: 80,
width: 80,
position: "absolute",
top: "44%",
left: "10%",
transform: [{ rotate: "90deg" }],
}}
source={require("./assets/match.png")}
/>
<Image
style={{
height: 80,
width: 80,
position: "absolute",
top: "48%",
left: "0%",
}}
source={require("./assets/match.png")}
/>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: "#fff",
alignItems: "center",
justifyContent: "center",
},
});
So on my iPhone it looks like that -
But on Android it not looks good at all -
So I want to ask is there a way I can position the matches correctly or i should create image in photo editor and use it in app?
Sorry for my bad English!
Alright, so this has got me busy for quite a few hours already. I am trying to create a login screen where the main components are rendered on the bottom, with the logo in the remaining space. This is kind of what I would like to achieve:
To support my textinputs, I use KeyboardAwareScrollView, as it works better for me as opposed to KeyboardAvoidingView. My code currently looks like this (I plan on using a background image with a 50% color overlay rather than the red background, so the ImageBackground has to stay in place too):
<ImageBackground
source={require('./assets/img/background-clouds.png')}
resizeMode="cover"
style={styles.backgroundImage}>
<View style={styles.backgroundOverlay} />
<View style={styles.dummyView}>
<Text>elloha</Text>
</View>
<Image
source={require('./assets/img/logo.png')}
style={styles.backgroundLogo}
resizeMode="contain"
/>
<KeyboardAwareScrollView
keyboardShouldPersistTaps="always"
keyboardOpeningTime={0}
alwaysBounceHorizontal={false}
alwaysBounceVertical={false}
contentInsetAdjustmentBehavior="automatic"
showsHorizontalScrollIndicator={false}
showsVerticalScrollIndicator={false}
automaticallyAdjustContentInsets={false}
extraScrollHeight={30}
enableOnAndroid>
<StatusBar
backgroundColor="transparent"
barStyle="light-content"
hidden={false}
translucent
/>
<TouchableWithoutFeedback
onPress={Keyboard.dismiss}
accessible={false}>
<View style={styles.content}>
<View style={styles.backgroundContainer}>
<SafeAreaView style={{ flex: 0 }} />
<View style={styles.loginContainer}>
<View style={styles.loginScreen}>
// textinputs and buttons go here
</View>
<SafeAreaView style={{ backgroundColor: 'white' }} />
</View>
<View
style={{
backgroundColor: 'white',
height: Dimensions.get('window').height,
position: 'absolute',
width: Dimensions.get('window').width,
top: Dimensions.get('window').height,
}}
/>
</View>
</View>
</TouchableWithoutFeedback>
</KeyboardAwareScrollView>
</ImageBackground>
Relevant styles:
const styles = StyleSheet.create({
container: {
backgroundColor: "white",
},
content: {
flex: 1,
},
backgroundImage: {
flex: 1,
position: "absolute",
top: 0,
bottom: 0,
left: 0,
right: 0,
width: Dimensions.get("window").width,
height: Dimensions.get("window").height,
},
backgroundContainer: {
justifyContent: "flex-end",
flex: 1,
width: Dimensions.get("window").width,
height: Dimensions.get("window").height,
},
backgroundOverlay: {
backgroundColor: "red",
position: "absolute",
top: 0,
left: 0,
right: 0,
bottom: 0,
},
logoContainer: {
top: "10%",
width: "100%",
},
backgroundLogo: {
alignSelf: "center",
position: "absolute",
width: 126,
height: 96,
},
dummyView: {
backgroundColor: "red",
flex: 1,
},
loginContainer: {
borderTopEndRadius: 30,
borderTopStartRadius: 30,
width: "100%",
backgroundColor: "white",
height: 500,
alignItems: "center",
paddingTop: Dimensions.get("window").width * 0.1,
},
loginScreen: {
width: "80%",
backgroundColor: "white",
},
});
This yields the following result:
I can get it done by adding top: 160 to the backgroundLogo style, but that's a fixed value. I want it to be always in the center of the available space, but I'm unable to add a view between the background and the loginContainer, as all the logic for the keyboard and such is handled in between.
Is there a way to achieve what I want? Ideally, I should also be able to check the available height, and only show the logo if there is enough space (e.g. available height > 100, otherwise don't show logo).
Important:
I want the logo to stay fixed, so if the keyboard is shown, the logo should not move up. The loginContainer should go "over" the logo
EDIT:
Wrap Image inside a View with this style and give the loginContainer style height: '70%' :
...
<View style={styles.dummyView}>
<Text>elloha</Text>
</View>
<View
style={{
justifyContent: 'center',
alignItems: 'center',
height: '30%',
position: 'absolute',
width: '100%',
}}>
<Image
source={require('./assets/img/logo.png')}
style={styles.backgroundLogo}
resizeMode="contain"
/>
</View>
<KeyboardAwareScrollView
keyboardShouldPersistTaps="always"
...
...
loginContainer: {
borderTopEndRadius: 30,
borderTopStartRadius: 30,
width: '100%',
backgroundColor: 'orange',
height: '70%',
alignItems: 'center',
paddingTop: Dimensions.get('window').width * 0.1,
},
...
hie! I think using Dimension to get a specific screen's height and deciding it has 70% of the screen covered via form sheet and rest is free for a logo to be in and we can ask it to be down a little using rest of height's 50% as margin-top ( the image will be in the center of that image )
here is a SNACK LINK to see your example working with my suggested solution.
here is the draft code:
import * as React from 'react';
import { Text, View, StyleSheet, Dimensions, ImageBackground,TextInput,
Image, TouchableWithoutFeedback, Keyboard, SafeAreaView, StatusBar} from 'react-native';
import Constants from 'expo-constants';
import {KeyboardAwareScrollView} from 'react-native-keyboard-aware-scroll-view';
export default function App() {
return (
<ImageBackground
source={{
uri: 'https://cdn.pixabay.com/photo/2021/08/23/18/37/tea-6568547_960_720.jpg',
}}
resizeMode="cover"
style={styles.backgroundImage}>
<View style={styles.backgroundOverlay} />
<Image
source={require('./assets/snack-icon.png')}
style={styles.backgroundLogo}
resizeMode="contain"
/>
<KeyboardAwareScrollView
keyboardShouldPersistTaps="always"
keyboardOpeningTime={0}
alwaysBounceHorizontal={false}
alwaysBounceVertical={false}
contentInsetAdjustmentBehavior="automatic"
showsHorizontalScrollIndicator={false}
showsVerticalScrollIndicator={false}
automaticallyAdjustContentInsets={false}
extraScrollHeight={30}
enableOnAndroid>
<StatusBar
backgroundColor="transparent"
barStyle="light-content"
hidden={false}
translucent
/>
<TouchableWithoutFeedback onPress={Keyboard.dismiss} accessible={false}>
<View style={styles.content}>
<View style={styles.backgroundContainer}>
<SafeAreaView style={{flex: 0}} />
<View style={styles.loginContainer}>
<View style={styles.loginScreen}>
<TextInput value={'email'} style={{borderBottomWidth:1, padding:10}}/>
<TextInput value={'password'} style={{borderBottomWidth:1, padding:10}}/>
</View>
<SafeAreaView style={{backgroundColor: 'white'}} />
</View>
<View
style={{
backgroundColor: 'white',
height: Dimensions.get('window').height,
position: 'absolute',
width: Dimensions.get('window').width,
top: Dimensions.get('window').height,
}}
/>
</View>
</View>
</TouchableWithoutFeedback>
</KeyboardAwareScrollView>
</ImageBackground>
);
}
const styles = StyleSheet.create({
container: {
backgroundColor: 'white',
},
content: {
flex: 1,
},
backgroundImage: {
flex: 1,
position: 'absolute',
top: 0,
bottom: 0,
left: 0,
right: 0,
width: Dimensions.get('window').width,
height: Dimensions.get('window').height,
},
backgroundContainer: {
justifyContent: 'flex-end',
flex: 1,
width: Dimensions.get('window').width,
height: Dimensions.get('window').height,
},
backgroundOverlay: {
position: 'absolute',
top: 0,
left: 0,
right: 0,
bottom: 0,
},
logoContainer: {
top: '10%',
width: '100%',
},
backgroundLogo: {
alignSelf: 'center',
position: 'absolute',
marginTop: Dimensions.get('window').height/7, // top for rest of the screen to push logo down
width: 126,
height: 96,
},
dummyView: {
backgroundColor: 'red',
flex: 1,
},
loginContainer: {
borderTopEndRadius: 30,
borderTopStartRadius: 30,
width: '100%',
backgroundColor: 'white',
height: Dimensions.get('window').height/1.5, //container of form height
alignItems: 'center',
paddingTop: Dimensions.get('window').width * 0.1,
},
loginScreen: {
width: '80%',
backgroundColor: 'white',
},
});
Here is the output of code on android/ios:
I have a problem with positioning my image inside a container and that is when I give image position: absolute and top property image got cropped from the top here's the issue:
here's my code:
<View style={styles.OurTherapistsContainer}>
<View style={styles.therapistCard}>
<View style={styles.imageContainer}>
<Image style={styles.image} source={require('../assets/img/leong.png')} />
</View>
</View>
</View>
...
therapistCard: {
width: 150,
height: 150,
borderRadius: 25,
borderWidth: 1,
borderColor: '#DFEEFF',
overflow: 'hidden',
},
imageContainer: {
width: 150,
height: 150,
backgroundColor: 'red',
},
image: {
width: '100%',
height: '100%',
position: "absolute",
top: 30
}
how can I fix this?
Try using resizeMode in image style like
resizeMode:'contain'
set resizeMode to cover
<Image style={styles.image} resizeMode="cover" source {require('../assets/img/leong.png')} />
I have a grid with a row and a col in that row. I copied the row with its col and pasted it under the first row so I could test having 2 cols under each other. That part works but sadly, they are sticking on eachother. There's no space/padding between them. I tried adding a top: 20 to the row and col but neither of that is working, in fact it makes the height of the second col even shorter.
Any ideas on how I can fix this? This is React Native with Native Base.
<Content>
<Grid style={Style.contentContainer}>
<Row style={Style.content}>
<Col>
<Text>Test</Text>
<View style={Style.completelyCenteredComponent}>
<Text>Text here</Text>
</View>
</Col>
</Row>
<Row style={Style.content}>
<Col>
<Text>Test</Text>
<View style={Style.completelyCenteredComponent}>
<Text>Text here</Text>
</View>
</Col>
</Row>
</Grid>
</Content>
Style:
module.exports = StyleSheet.create({
mainApp: {
position: 'absolute',
top: 0,
left: 0,
width: '100%',
height: '100%'
},
backgroundImage: {
flex: 1,
resizeMode: 'cover'
},
contentContainer: {
flex: 1,
alignItems: 'center',
justifyContent: 'center'
},
content: {
backgroundColor: 'rgba(255, 255, 255, 0.84)',
minWidth: '88%',
maxWidth: '88%',
height: 200,
top: 0,
padding: 26,
borderWidth: 0.6,
borderColor: '#000000'
},
completelyCenteredComponent: {
flex: 1,
justifyContent: 'center',
alignItems: 'center'
},
});
You need add marginBottom for your content and create other style for last row with marginBottom: 0.
Your style:
content: {
... your style
marginBottom: 20,
},
lastRow: {
marginBottom: 0,
}
And your component:
<Grid>
<Row style={style.content}>...</Row>
<Row style={[style.content, style.lastRow]}>...</Row>
</Grid>
in my point of view try adding margin at content object of styling
it would work i think. and where did you add the top:20 there is no such code in there in styling
I have a scroll view in my alloy project and I need to add a few views when a button is pressed, but the content height, the scrollable area, is not changing, the bottom content goes away from the view.
This is my Alloy View (.xml) file
<Alloy>
<Window class="container">
<ScrollView id="MainView" >
<View id="innerContent" class="rowLayout">
<Label>Address 1</Label>
<TextField id="Address1" class="textArea"></TextField>
</View>
</ScrollView>
<View id="buttonView">
<Button id="button" onClick="doClick" title="Add New Address Input" top="10" width="100" height="50" />
</View>
</Window>
</Alloy>
My styling file (.tss), with all the styles:
".container": {
backgroundColor:"white",
height: Titanium.UI.FILL
}
"#MainView": {
width: Titanium.UI.FILL,
height: Titanium.UI.FILL,
scrollType: "vertical",
layout: "vertical",
bottom: "100dp",
top: "20dp",
borderColor: "#008000",
borderWidth: "1px",
left:"2dp",
right: "2dp"
}
"#buttonView" : {
height: "50dp",
width: Titanium.UI.FILL,
right: "10dp",
left: "10dp",
bottom: '8dp',
borderColor: "#000000",
borderWidth: "1px"
}
".rowLayout": {
layout: "vertical"
}
".textArea" : {
height: "70dp",
width: Titanium.UI.FILL,
borderColor: "#000000",
borderWidth: "1dp",
left: "8dp",
right: "8dp"
}
And my Controller (.js)
var counter=0;
function doClick() {
counter++;
var label = Ti.UI.createLabel({
text: "Address " + counter + " :"
});
var textField = Ti.UI.createTextField({
height: "70dp",
width: Titanium.UI.FILL,
borderColor: "#000000",
borderWidth: "1dp",
top: "5dp",
right: "8dp",
left: "8dp"
});
$.innerContent.add(label);
$.innerContent.add(textField);
}
$.index.open();
The scroll views does not scroll, or if I already set 3 or four inputs it scroll only to the point where the fourth input was
First thing to do is to move your styling from .xml to .tss to increase overview
Try to set your ScrollView height to Ti.UI.SIZE then set layout to vertical and after that on your click function you add the new view at top: '5%', bottom: '5%'
but remember... you have an button outside your ScrollView, it will goes off screen when your ScrollView increase height