I am trying to scroll a view over another view in React Native.
render() {
return (
<View style={{
flex: 1
}}>
//THIS IS A BACKGROUND VIEW
<BackgroundView />
//THIS IS THE FOREGROUND VIEW
<View style={{
borderWidth: 1,
}}>
<FlatList
data={cards}
refreshing={this.state.isRefreshing}
onRefresh={this.onRefresh}
renderItem={({ item, index }) => <Card {...item} />}
keyExtractor={(item, index) => index}
onEndReached={this.loadMore}
onEndReachedThreshold={2} />
</View>
</View>
)
}
I want the foreground view, which contains the FlatList to scroll over the BackgroundView
I have tried using position:absolute on the ForegroundView but the FlatList stopped working and I could not scroll.
EDIT : Initially the BackgroundView is shown (contains some intro content), with the ForegroundView on the bottom partially, and as the user scrolls on the screen, The ForegroundView is scrolled over it
This is working:
For your background view use the style '...StyleSheet.absoluteFillObject', or:
{ position: ('absolute': 'absolute'),
left: 0,
right: 0,
top: 0,
bottom: 0,
}
As noted in the comment depending of your design, the foreground will often fill the entire View, making the background impossible to interact with.
The only solution I have found is making the foreground positionned absolute and cover the minimal surface as possible. It works if the view is kept simple.
Example here for a button container on the bottom of the screen, that does not overlaps top, left and right of the Background:
bottomButtonContainer: {
position: 'absolute',
flex: 1,
alignItems: 'center',
bottom: 0,
marginVertical: 5,
marginHorizontal: '25%',
width: '50%',
backgroundColor: 'transparent',
flexDirection: 'row',
justifyContent: 'center',
},
Related
I'm using libraries: "react-native-svg": "12.1.0" & "react-native-svg-transformer": "0.14.3"
import FooIcon from '../assets/images/icons/fooIcon.svg';
<View style={{ flex: 1, paddingTop: 8 }}>
<FooIcon></FooIcon>
<View style={{ position: 'absolute', top: 35, bottom: 0, left: 14, right: 0 }} >
<Text>foo</Text>
</View>
</View>
How can I have "foo" text centered over the FooIcon. The solution above does not center the text which is important because "foo" text length can change and it has to be in center in every case.
this chunk of code should do the work for you
<View
style={{
justifyContent: 'center',
alignItems: 'center'
}}
>
<SVG /> //your svg image component goes here
<Text
style={{
position: 'absolute'
}}
>
Test
</Text>
</View>
I would recommend not to use an absolute position if the content size can change dynamically. I would build this with just using flex-box:
...
<View style={styles.itemContainer}>
<Text>Foo</Text>
<View style={styles.iconMock} />
</View>
...
const styles = StyleSheet.create({
itemContainer: {
alignItems: "center",
//this has default flex: 0, which means the container will always have the size the children take.
//we then tell it to centre all the children (items) which gives the needed effect.
},
iconMock: {
backgroundColor: "blue",
height: 50,
width: 150,
}
});
Building it this way the text will always be centred:
I want to use the fontAwesome + icon such that it is in the middle of a circle. I want to use it as one icon item. I read that we can use it along with the circle icon and place it inside that but I couldn't make it work.
import IconFA from 'react-native-vector-icons/FontAwesome';
<IconFA
name="plus"
size={moderateScale(30)}
color="black"
style={styles.thumbnail}
/>
{/* <IconFA
name="circle-thin"
size={moderateScale(67)}
color="white"
/> */}
thumbnail: {
height: 68,
width: 68,
position: 'relative',
},
Alternatively, I read about 'stacked' font awesome icons but couldn't understand how to use it in react native.
Reference: https://jsfiddle.net/1d7fvLy5/1/
Snack Expo:
https://snack.expo.io/9Ild0Q1zG
I want to make something like this:
I am also open to using a <Thumbnail> if I find a similar icon's link but I couldn't find any such free icon online.
The JSFiddle example that you posted creates the circle using a CSS border with border-radius to make it circular. We can do pretty much the same thing in react-native, though borderRadius in react-native can only be a fixed number and not a percent (edit: this limitation is specific to typescript since the borderRadius property has type number. Percentage strings do work at runtime).
You can tweak this code however you want, but this will get the job done. You can use IconFA and CircleBorder as two separate nested components but I also made a component IconInCircle which combines the two.
const IconInCircle = ({ circleSize, borderWidth = 2, borderColor = 'black', ...props}) => (
<CircleBorder
size={circleSize}
borderWidth={borderWidth}
borderColor={borderColor}
>
<IconFA {...props} />
</CircleBorder>
);
const CircleBorder = ({ size, borderWidth, borderColor, children }) => (
<View
style={{
width: size,
height: size,
borderRadius: 0.5 * size,
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
borderColor,
borderWidth,
}}>
{children}
</View>
);
The IconInCircle component takes three props specific to the border: circleSize, borderWidth, and borderColor. All other props are passed through into the IconFA child component.
Basically what we are doing is placing the icon inside of a fixed-size View with a circular border and centered contents.
Now we can use it like so:
<IconInCircle
name="plus"
size={30}
color="black"
style={styles.thumbnail}
borderWidth={1}
circleSize={50}
/>
Expo Link
Try this, just adjust according to your needs, and also don't forget to support other browsers for flex.
const styles = StyleSheet.create({
thumbnail: {
height: 68,
width: 68,
position: 'relative',
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
border: '1px solid #333',
borderRadius: '50%'
},
});
import IconFA from 'react-native-vector-icons/FontAwesome';
<View style={{
position:'relative',
justifyContent:'center',
alignItems:'center',
width:40,
height:40,
backgroundColor:'black'
}}>
<IconFA name='circle-thin' size={40} color='grey'/>
<IconFA name='plus' size={20} color='white' style={{position: 'absolute', zIndex: 99}} />
</View>
I am new to ReactNative, but above snippet should work in your case
Snack Expo
Making a to-do list type thing to add in my app but when trying to align the 'add todo' button to the bottom right, the button goes anywhere but there.
I'm pretty good with CSS but get pretty messed up when using React CSS/styles. I've played around with different properties, giving a parent a style instead of the child etc.
The class is as follows
class AgendaScreen extends React.Component {
addReminder = () => {
//blank so far :)
};
render() {
return (
<View>
<Text style={styles.titleStyle}>Agenda</Text>
<View style={styles.reminderView}>
<TouchableOpacity style={styles.reminderTouch}>
<Text style={styles.reminderBtn}>+</Text>
</TouchableOpacity>
</View>
</View>
);
}
}
and the styles here
//Agenda screen styles
reminderView: {
flex: 1,
justifyContent: 'flex-end',
},
reminderTouch: {
width: 60,
height: 60,
backgroundColor: 'orange',
borderRadius: 100,
textAlign: 'center',
margin: 20,
},
reminderBtn: {
fontSize: 50,
margin: 10,
alignSelf: 'flex-end',
},
The goal is to align the plus symbol in the middle of the circle and align that circle to the bottom right. With the pasted settings the circle is in the top left and the plus symbol is aligned to the bottom of the circle.
Also, the code posted above wasn't the closest I've gotten as I could easily do it with padding but I'd prefer to use flexbox.
Simply change your style replace with this style and Please add style to your top view
<View style={{flex:1}}>
<Text>Agends</Text>
<View style={styles.reminderView}>
<TouchableOpacity style={styles.reminderTouch}>
<Text style={styles.reminderBtn}>+</Text>
</TouchableOpacity>
</View>
</View>
reminderView: {
flex: 1,
right:0,
margin:5,
bottom:0,
position:'absolute'
},
reminderTouch: {
width: 60,
height: 60,
backgroundColor: 'orange',
borderRadius: 100,
justifyContent:'center',
alignItems:'center',
margin: 20,
},
reminderBtn: {
fontSize: 50,
margin: 5,
alignSelf: 'center',
}
Please check this snack.expo link
Here is how I would do it:
<View style={{
flex: 1,
justifyContent: 'center',
width:'100%',
paddingTop: Constants.statusBarHeight,
backgroundColor: '#ecf0f1',
padding: 8,
}}>
<View
style={{
justifyContent:'center',
alignItems:"center",
width:65,
borderRadius:100,
height:65,
position:'absolute',
bottom:15,
right:15,
backgroundColor:"red",
elevation:10
}}
>
<Icon
name="plus"
size={25}
color="white"
/>
</View>
</View>
What it does is that it makes the round button float on the bottom right corner of the screen. Since you are making a todo app, you would want it to float over the todo list when it becomes longer.
https://snack.expo.io/#ammarahmed/rebellious-donuts
I'm trying to create a header with an image so I write this:
<View style={{
flex: 1,
backgroundColor: "#FFFFFF",
padding: 20
}}
>
<View style={{ flex: 3 }}>
<Image
source={this.images.header}
style={{
flex: 1,
alignSelf: "flex-end", // HERE
resizeMode: "contain",
marginTop: -20,
marginLeft: -20
}}
/>
</View>
</View>
The weird part is alignSelf: "flex-end" - this align the image at the left side! As far as I know, it must be alignSelf: "flex-start" to align left.
Am I wrong?
PS: I use marginTop: -20 and marginLeft: -20 to stick the image to borders of the device (because of padding: 20 the container)
Any idea?
Thank in advance!
I think it is because the Image cover the whole space but the image data is resized so that you think it is only in a part of the view. Try removing flex: 1and set the widthand heightproperly or at leaset one of both.
I have child View inside a Parent View component. I set Parent's border but child View's border override parent's one.
Here is the screen
Here is my code
<View style={{flexDirection: 'row',marginLeft: 20, marginRight: 20, height: height/20,
width: width-40, borderWidth: 2, borderRadius: 4, borderColor: '#D3D3D3'}}>
<View style={{backgroundColor: '#D3D3D3',flexDirection: 'row',
height: height/20, alignItems: 'center'}}>
<Thumbnail style={{marginLeft: 5,width: 20, height: 20}} square source={require('../assets/Turkey.png')}/>
<Picker mode="dropdown" selectedValue={this.state.selectedCountry}
onValueChange={(value)=>this.onCodeChanged(value)}
>
<Picker.Item label="+44" value="England"></Picker.Item>
<Picker.Item label="+90" value="Turkey"></Picker.Item>
</Picker>
</View>
<View style={{height: height/20, width: 250}}>
<Input placeholder="Phone" placeholderTextColor='#D3D3D3'/>
</View>
</View>
I tried to set borderBottomWidth props of child view to 0, but it did not work. Anyone know how can I fix this issue?
Is not the border. You are putting the height of everything (height/20) but you are not taking into account the border you just added, which counts towards the height.
Try something like (height/20 - 4)