I want to create a row column type structure where i can create multiple section which can be dragged as well as resized as per needed, I have used this library(https://www.npmjs.com/package/react-native-draggable) for making dragable section but how i can configure it to be resizable, also it needs to be limited to the container
<View
style={{
flexDirection: 'row',
flex: 1,
padding: 20,
}}>
<View style={{ flex: 0.3, backgroundColor:'blue' }}>
<Draggable renderSize={56} renderColor='black' offsetX={-100} offsetY={-200} renderText='A' pressDrag={() => alert('touched!!')} />
</View>
<View style={{ flex: 0.3, backgroundColor: 'green' }}>
<Draggable renderColor='red' renderShape='square' renderText='UC' />
</View>
<View style={{ flex: 0.4, backgroundColor: 'yellow' }}>
<Draggable renderColor='red' renderShape='square' renderText='B' />
<Draggable />
</View>
</View>
Using this Resizable and draggable library you can easily achieve this with just 3 lines of code,
<Gestures rotatable={false}>
<Text style={{ padding: 40 }}>AHGHAGS</Text>
</Gestures>
see working example on snack here
Related
I'm new to react native and i'm trying to display some text in a custom touchable opacity. but the text keep exceeding the border even when i'm using flex wrap. my code is the following:
<View style={styles.main_container} >
<View style={styles.ctr1}>
<TouchableOpacity style={{ flexDirection: 'row' }} >
<Image style={styles.img} source={{ uri:`data:image/gif;base64,${encodedData}`}}/>
<View>
<Text style={styles.txt}> k </Text>
<Text style={{ flexWrap:1 }} > ddddddddddddddddddddddddddddddddddddddddd </Text>
<Text> kk </Text>
</View>
</TouchableOpacity>
</View>
</View>
and here is look of the styles i used:
main_container: {
flex: 1,
height: 300,
flexDirection: 'column',
backgroundColor: "grey",
width: '95%',
margin: 10,
},
ctr1: {
flex: 1,
flexDirection: 'row',
backgroundColor: 'white',
//margin: 2,
},
How can i wrap it
Issue was not in the <Text> element that you have given the style flexWrap:1. Problem was in the parent elements.
Adding flex: 1 to <TouchableOpacity> and <View> which contains your <text> will solve the problem.
This will do the calculation for width depends on the device width.
<View style={styEdit.main_container}>
<View style={styEdit.ctr1}>
<TouchableOpacity style={{ flexDirection: 'row', flex: 1 }} >
<Image style={styles.img} source={{ uri:`data:image/gif;base64,${encodedData}`}}/>
<View style={{ flexDirection: 'column', flex: 1 }}>
<Text style={styEdit.txt}>k</Text>
<Text>ddddddddddddddddddddddddddddddddddddddddd---</Text>
<Text>kk</Text>
</View>
</TouchableOpacity>
</View>
</View>
Tested the code in my machine.
Cheers!
Achieving Stack/Overlap Icons using React native.
I am trying to achieve something like this in react native:
https://fontawesome.com/how-to-use/on-the-web/styling/stacking-icons
how to achieve this?
You can achieve this by doing it like this. Using width and height helps you keep the view in place and aligning everything to the center so it looks nice like stacked icons.
<View style={{
position:"relative",
justifyContent:'center',
alignItems:"center",
width:40,
height:40
}}>
<Icon name="circle" size={34} color={"black"} />
<Icon name="flag" size={20} color={"white"} style={{position: 'absolute', zIndex: 99}} />
</View>
https://snack.expo.io/HkxWerHBr
Output:
In this Example I stacked the FontAwesome Icon "square" and "home". To stack them, you need a parent view with position: 'relative'. Then you can apply position: 'absolute'and a zIndex to the icon which should be on top of the other one. Afterwards you can position the icon for example with the top/left style property.
Code:
<View style={{position: 'relative'}}>
<Icon name="square" size={24} color={"black"} />
<Icon
name="home"
size={24}
color={"white"}
style={{position: 'absolute', zIndex: 99, left: 0, top: 0}} />
</View>
Demo:
https://snack.expo.io/rkHnZJrrH
Was able to achieve like this with react native elements [ not sure if they use zIndex internally]
render() {
return (
<View style={styles.container}>
<View
style={{
position: 'relative',
height: 64,
width: 64,
justifyContent: 'center',
alignItems: 'center',
}}>
<Icon type="font-awesome" name="square" size={64} />
<Icon
type="font-awesome"
name="twitter"
color="white"
size={32}
containerStyle={{ position: 'absolute' }}
/>
</View>
</View>
);
}
And the container style would be
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
paddingTop: Constants.statusBarHeight,
backgroundColor: '#ecf0f1',
padding: 8,
}
snack repo:
https://snack.expo.io/#roach_iam/vigorous-blueberries
Simply I am trying to make 3 Texts with icons align in a column
I want to give the expo icons a little margin-top so they are next to each text element
Then how can I make the next line in text aligned with the text itself
For Example The (S) in School to be vertically aligned with the (5) in 5th
I searched a lot on how to do that in react-native but with no luck
and I tried some normal CSS stuff but didn't work is it achievable?
Code :
<View style={styles.cardView}>
<Text style={styles.CardTextLayout} > <MaterialIcons name="store" size={21} color="lightgrey" /> {item.key} </Text>
<Text style={styles.locationText} > <Entypo name="location-pin" size={21} color="lightgrey" />5th Settelment, Near Akhnaton School, Cairo</Text>
<Text style={styles.locationText} > <MaterialIcons name="description" size={21} color="lightgrey" />Breif Description about the place and what is offers</Text>
</View>
Styles
CardTextLayout: {
// marginLeft: 8,
fontSize: cardResponsiveFontSize,
fontWeight: 'bold',
textAlign: 'left',
color: '#231F20',
elevation: 8,
},
locationText: {
fontSize: cardResponsiveFontSize,
textAlign: 'left',
color: '#231F20',
elevation: 8,
},
I don't know how you would do that with your current code, but you can try to set it up like this.
<View style={styles.cardView}>
<View style={styles.cardRow}>
<View style={styles.cardIcon}>{put your icon here}</View>
<View style={styles.cardText}>{put your text here}</View>
</View>
...add the other 2 rows here
</View>
And styles
cardRow: {
flexDirection: "row",
flex: 1
},
cardIcon: {
flex: 1
},
cardText: {
flex: 9
}
And add your styles for icons and text.
You can change up the cardIcon and cardText flex ratio so that you get different width for your icon.
You can make a wrapper view with alignItems: 'center' to make both text and icon vertical center
<View style={styles.cardView}>
<View style={{ flexDirection: 'row', alignItems: 'center' }}>
<MaterialIcons name="store" size={21} color="lightgrey" />
<Text style={styles.CardTextLayout}>{item.key}</Text>
</View>
.....
</View>
I got the following problem: I want to implement a location search bar with the google maps places api to generate results. Everything is working, but the listview(which's position prop is set to absolute) seems to be transparent.
i already tried to set the containers opacity to 1 but that didnt helped. can someone tell me what i need to change to make to underlaying test-text not visible in the container?
my code:
locationPicker:
<View style={styles.modalContainer}>
<SafeAreaView style={styles.safeArea}>
<View style={styles.searchContainer}>
<LocationSearchBar/>
</View>
</SafeAreaView>
<View style={styles.modalContent}>
<Text>test</Text>
</View>
</View>
searchContainer: {
alignItems: "center",
justifyContent: "center",
minHeight: 60,
paddingHorizontal: 16,
paddingVertical: 10,
backgroundColor: theme.colors.screen.alter
}
locationSearchBar:
<React.Fragment>
<TextInput
autoCorrect={false}
onChangeText={handleTextChange}
value={inputValue}
label={<Icon name={"search"} />}
placeholder={"Search location..."}
/>
<ScrollView style={styles.autoCompleteResultList}>
{locationResults.map((el, i) => (
<AutoCompleteItem
{...el}
fetchDetails={fetchDetails}
key={String(i)}
/>
))}
</ScrollView>
</React.Fragment>
AutoCompleteItem:
<View style={styles.autoCompleteItemContainer}>
<RkText rkType={"primary2"}>{this.props.structured_formatting.main_text}</RkText>
<RkText rkType={"primary1"}>{this.props.structured_formatting.secondary_text}</RkText>
</View>
autoCompleteItemContainer: {
backgroundColor: "red",
paddingHorizontal: 5,
paddingVertical: 5
},
autoCompleteResultList: {
maxHeight: 200,
position: "absolute",
backgroundColor: theme.colors.screen.alter,
width: "100%",
top: 55
}
cheers!
I think it's not a background-color or opacity problem.
It seems overlay problem of your position:absolute and default views
test is normal or default one so it has highest priority to come over any position:absolute views.
hence, test is above the results.
You'll need to change this position and make result above the test.
so do this by zIndex.
autoCompleteResultList: {
maxHeight: 200,
position: "absolute",
backgroundColor: theme.colors.screen.alter,
width: "100%",
top: 55,
zIndex:1 // highest number of zIndex in your current screen if you have other zIndex
}
I have this simple UI structure:
<View style={{ flexDirection: 'row', flexWrap: 'wrap' }}>
<Text>A simple fee equal to</Text>
<View style={{ width: 80 }}>
<TextInput style={{ borderWidth: 1, borderColor: 'black' }} />
</View>
<Text>of any settlement or judgment</Text>
</View>
In a small screen, it would show something like this
As shown in the image above, I expected the text, of any settlement or judgment, to not move to the next line.
The closest solution that I could think of was to chunk each text into individual Text elements.
<View style={{ flexDirection: 'row', flexWrap: 'wrap' }}>
<Text>A simple fee equal to</Text>
<View style={{ width: 80 }}>
<TextInput style={{ borderWidth: 1, borderColor: 'black' }} />
</View>
{'of any settlement or judgment'.split(' ').map((chunk, i) => (
<Text key={i.toString()}>{chunk} </Text>
)}
</View>
resulting to something like this:
Question: Is there a better way to achieve what I want? Or is this the only way to solve the problem?
Well you can write it inside a view with a flexDirection:'row' style property or you can wrap it in another Text like this :
<Text>
<Text>A simple fee equal to</Text>
<View style={{ width: 80 }}>
<TextInput style={{ borderWidth: 1, borderColor: 'black' }} />
</View>
<Text>Of any settlement or Judgement</Text>
</Text>