I have a problem with aligning icons in TouchableOpacity in one row.
This is my code:
<View style={styles.container12}>
<View style={styles.sociaContainer}>
<TouchableOpacity style={styles.socialIcon}
onPress={() => Linking.openURL('https://www.facebook.com/JelenPivoBiH/?brand_redir=28032575448')}>
<Icon name="facebook" size={50} color="#fff" />
</TouchableOpacity>
<TouchableOpacity style={styles.socialIcon}
onPress={() => Linking.openURL('https://www.instagram.com/jelenpivo/')}>
<Icon name="instagram" size={50} color="#fff" />
</TouchableOpacity>
</View>
<Image style={styles.headerImage} source={require('../assets/images/Picture-app2.png')} />
</View>
const styles = StyleSheet.create({
socialIcon: {
alignItems: 'center',
flexDirection: 'row',
marginLeft: 50,
},
container12: {
flex: 1,
flexDirection: 'row',
marginTop: 20,
},
});
I tried every combination with flex that I know, but it's not working. For every other element it is working, but not in this case.
This is the result:
I want them on one row.
Just a simple style change made your code works. Check this
<View style={styles.container12}>
{/* <View style={styles.sociaContainer}> */}
<View style={styles.container12}>
<TouchableOpacity style={styles.socialIcon}
onPress={() => Linking.openURL('https://www.facebook.com/JelenPivoBiH/?brand_redir=28032575448')}>
<Icon name="facebook" size={50} color="#fff" />
</TouchableOpacity>
<TouchableOpacity style={styles.socialIcon}
onPress={() => Linking.openURL('https://www.instagram.com/jelenpivo/')}>
<Icon name="instagram" size={50} color="#fff" />
</TouchableOpacity>
</View>
<Image style={styles.headerImage} source={require('../assets/images/Picture-app2.png')} />
</View>
Hope this will helps you.
Related
I have a react native project. I currently have a bar that I made which has a text input and view selector. The view selector is small and the text nput is currently small. I dont want anything to change but I want the textInput to fill the empty white space between the input and the view selector dynamically.
here is the my code:
import React, { useState } from 'react'
import { Text, View, StyleSheet, TextInput } from 'react-native'
import { Feather } from '#expo/vector-icons'
const SearchAndFilterComponent = () => {
const [search, setSearch] = useState()
return (
<View style={styles.container}>
<View style={styles.bar}>
<View style={styles.searchContainer}>
<View style={styles.search}>
----------------------------------------------------------------------------------
<View style={styles.searchIconContainer}>
<Feather style={styles.searchIcon} name='search' color={'#273be2'} size={24} />
</View>
<View style={styles.searchInputContainer}>
<TextInput style={styles.searchInput} value={search} onChange={setSearch} placeholder={'search'}/>
</View>
----------------------------------------------------------------------------------
</View>
<View style={styles.navigationContainer}>
<Feather name='navigation' color={'#273be2'} size={24} />
</View>
</View>
<View style={styles.mapContainer}>
<View style={styles.splitter}></View>
<Feather style={styles.buttonIcon} name='map' color={'#273be2'} size={24} />
<Text style={styles.text}>Map</Text>
</View>
</View>
<View style={styles.bar}>
<View style={styles.sorfAndFilter}>
<View style={styles.buttonContainer}>
<Feather name='filter' color={'#273be2'} size={24} />
<Text style={styles.text}>Filter</Text>
</View>
<View style={styles.buttonContainer}>
<Feather name='sliders' color={'#273be2'} size={24} />
<Text style={styles.text}>Sort</Text>
</View>
</View>
<View style={styles.buttonContainer}>
<Feather name='download' color={'#273be2'} size={24} />
<Text style={styles.text}>Save</Text>
</View>
</View>
<View style={styles.bar}>
<View>
<Text style={styles.text}>Results: "Palm Springs, CA"</Text>
</View>
<View>
<Text style={styles.text}>2,345 Properties</Text>
</View>
</View>
</View>
)
}
const styles = StyleSheet.create({
container: {
width: '100%',
marginTop: 50
},
bar: {
display: 'flex',
flexDirection: 'row',
justifyContent: 'space-between'
},
searchContainer: {
display: 'flex',
flexDirection: 'row'
},
search: {
display: 'flex',
flexDirection: 'row'
},
splitter: {
height: 20,
width: 2,
backgroundColor: 'lightgrey',
marginHorizontal: 8
},
mapContainer: {
display: 'flex',
flexDirection: 'row'
},
sorfAndFilter: {
display: 'flex',
flexDirection: 'row'
},
buttonContainer: {
display: 'flex',
flexDirection: 'row'
},
searchInputContainer: {
display: 'flex',
flexDirection: 'column',
alignItems: 'stretch'
},
searchInput: {
fontSize: 17,
borderBottomWidth: 2,
borderBottomColor: 'grey',
alignItems: 'stretch'
},
text: {
fontSize: 17
},
buttonIcon: {
marginRight: 4
}
})
export default SearchAndFilterComponent
Here is an image:
Use flexbox.
Here is an example with tailwind css.
<View
style={[
tw`flex flex-row items-center mx-1 mb-1 rounded-full`,
{ backgroundColor: "#2E2E2E" },
]}
>
<TextInput
style={[
tw`m-0 p-0 px-4 py-3 flex-grow text-white text-lg`,
{},
]}
placeholder="Type message here ..."
placeholderTextColor="#777"
/>
<Icon
name="send"
type="material"
size={20}
color="white"
style={[
tw`rounded-full p-3 mr-1`,
{ backgroundColor: "#B50055", opacity: 1 },
]}
/>
</View>
The idea is to use flexbox on the View and flex-grow on the TextInput.
The rest of the stuff will take the least space.
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>
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>
i want to achieve the following:
i am using a module called react-native-easy-grid
the whole thing is wrapped inside a Grid
with:
blue line being Col
red line being Row
orange line being View
here's my code so far:
<Grid>
<Col>
<Thumbnail circular source={selectedChildAvatar} />
</Col>
<Col size={4}>
<Row style={{ flexWrap: 'wrap', alignItems: 'center', justifyContent: 'space-evenly' }}>
{/* name, in review */}
<View>
{!_.isEmpty(selectedChild) && <Text>{selectedChild.firstName}</Text>}
<View
style={{
flexDirection: 'row',
alignItems: 'center'
}}>
<Text note>In review: {inReviewCount <= 0 && 0}</Text>
{inReviewCount > 0 && (
<View
style={{
backgroundColor: 'red',
paddingLeft: 4,
paddingRight: 4,
borderRadius: 50
}}>
<Text note>10</Text>
</View>
)}
</View>
</View>
{/* earnings, penalties */}
<View>
{/* earnings */}
<View
style={{
flexDirection: 'row',
alignItems: 'center'
}}>
<ProgressiveImage
resizeMode='cover'
imageStyle={styles.badge}
style={styles.badge}
source={images.icon.earnings}
/>
<Text style={[styles.digits, styles.earningDigits]}>12</Text>
</View>
{/* penalties */}
<View
style={{
flexDirection: 'row',
alignItems: 'center'
}}>
<ProgressiveImage
resizeMode='cover'
imageStyle={styles.badge}
style={styles.badge}
source={images.icon.penalties}
/>
<Text style={[styles.digits, styles.penaltyDigits]}>12</Text>
</View>
</View>
{/* review button */}
<View style={{ marginVertical: 10 }}>
<Button
small
iconRight
primary
block
disabled={inReviewCount === 0}>
<Text>Review</Text>
<Icon name='arrow-forward' />
</Button>
</View>
</Row>
</Col>
</Grid>
but this is what im getting:
what approach would it be to stretch the wrapped button to 100% of the width?
thank you!
use flex or set width to 100%
<View style={{ marginVertical: 10, flex: 1 }}>
<Button
small
iconRight
primary
block
disabled={inReviewCount === 0}>
<Text>Review</Text>
<Icon name='arrow-forward' />
</Button>
</View>
I want to set two textInputs on same row , named set 1 and set 2
<View style={{flex: 1, flexDirection: 'row'}}>
<Text style={styles.label}style= {{width : 100}}>Expiration date</Text>
<View style={styles.inputWrap}>
<TextInput style={styles.inputdate} />
</View>
<Text style={styles.label}>CVV</Text>
<View style={styles.inputWrap}>
<TextInput style={styles.inputcvv } maxLength={17} />
</View>
Please send me the css paticulat, Thanks in Advance
If you want your labels and TextInputs in the same line the code will be like this:
<View style={{flexDirection: 'row'}}>
<View style={{flex: 1, flexDirection: 'row'}}>
<Text style={{flex: 0}}>Expiration date</Text>
<TextInput style={{flex: 1}} />
</View>
<View style={{flex: 1, flexDirection: 'row'}}>
<Text style={{flex: 0}}>CVV</Text>
<TextInput style={{flex: 1}} maxLength={17} />
</View>
</View>