I have an input container using react-native-elements, and the container includes an icon. I would like to reduce the height of the container but getting a bad result, the height around the icon doesn't fit:
My styling:
input: {
layout: {
...inputs.darkCredentials,
containerStyle: {
...inputs.darkCredentials.containerStyle,
width: '100%',
padding: 0,
marginTop: Platform.OS === 'ios' ? 25 : 17,
marginBottom: Platform.OS === 'ios' ? 15 : 13,
borderRadius: 12,
height: 32,
// marginBottom: 45,
elevation: 5,
shadowColor: '#000000',
shadowOffset: { height: 0.5 },
shadowOpacity: 0.15,
shadowRadius: 5,
},
leftIconContainerStyle: {
...inputs.darkCredentials.leftIconContainerStyle,
// height: Platform.OS === 'ios' ? 40 : 45,
backgroundColor: greenPrestoDark,
padding: 0,
height: 32,
margin: 0,
paddingLeft: 15,
borderRadius: 12,
},
labelStyle: {
marginLeft: 10,
height: 32,
color: 'white',
position: 'absolute',
top: -25,
},
},
and for the icon:
icon: {
layout: {
type: 'material-community',
name: 'lock',
...icons.darkCredentials,
size: 32,
height: 32,
style: { color: 'white' },
},
I'm trying to set height: 32 everywhere
What should I do to reduce the height of the input container altogether?
Can you charge this way
inputStyle={styles.inputStyle}
inputStyle: {
height:200
},
This is My way
<Input
inputStyle={{
fontSize: 12,
}}
// labelStyle={{height: 8}}
inputContainerStyle={{
borderWidth: 1,
height: 30,
marginLeft: pxToDp(-8),
borderColor: '#2F4972',
backgroundColor: '#E2E2E2',
}}
placeholder="设备名称/位置信息"
placeholderTextColor="#000"
/>
the inputContainerStyle is key
Related
why my purple absolute view is not showing all, only the half ?
look at the image
Code:
CardView:
const { width } = Dimensions.get('window');
const MAX_NAME_WIDTH = width / 2 - 48;
const CARD_WIDTH = width * 0.45;
const UserCardAdvanced = ({ user_id, username, profile_image, followingShops, is_verification, isD, stars, onPress, onPressReviews, onPressFollow }: IUserCardAdvanced) => {
return (
<Pressable onPress={onPress} style={s.card}>
{ isD &&
<PurpleNotice />
}
<Image source={{uri: profile_image}} resizeMode='contain' style={s.profile_image} />
<View style={s.starContainer}>
<Stars
star_filled={stars?.fill}
disabled
is_all
size={15}
onPressAll={onPressReviews}
/>
<Text style={s.reviewTotal}>{stars?.total_reviews}</Text>
</View>
<View style={s.nameContainer}>
<NameWithVerification
name={username}
is_verification={is_verification}
nameStyle={s.nameStyle}
/>
</View>
<FollowBtn
onPress={onPressFollow}
is_followed={false}
size={24}
/>
</Pressable>
)
}
const s = StyleSheet.create({
card: {
padding: 12,
backgroundColor: '#fff',
borderRadius: 8,
elevation: 3,
margin: 6,
justifyContent: 'center',
alignItems: 'center',
marginBottom: 20,
zIndex: 99921,
width: CARD_WIDTH
},
starContainer: {
flexDirection: 'row',
alignItems: 'center',
marginTop: 8
},
reviewTotal: {
fontFamily: globalStyles.font_regular,
color: '#333',
marginLeft: 4
},
nameContainer: {
marginVertical: 8
},
nameStyle: {
color: '#333',
fontSize: 13,
maxWidth: MAX_NAME_WIDTH
},
profile_image: {
height: 84,
width: 84,
borderRadius: 50,
},
username: {
fontFamily: globalStyles.font_regular,
color: '#555',
marginTop: 12,
textAlign: 'center'
}
})
Purple Notice
const PurpleNotice = (isD: isD) => {
return (
<View style={s.view}>
<Text style={s.text}>TESTTESTETS</Text>
</View>
)
}
const s = StyleSheet.create({
view: {
padding: 2,
paddingHorizontal: 10,
backgroundColor: globalStyles.globalColor,
borderRadius: 6,
position: 'absolute',
top: -10,
left: 0,
zIndex: 99999
},
text: {
fontFamily: globalStyles.font_light,
color: '#fff',
fontSize: 11,
textTransform: 'uppercase',
textShadowColor: '#fff',
textShadowOffset: {
height: 2,
width: 2
}
}
});
I dont know what I am doing wrong i am very thankful for your help!!
.........................................
.........................................
.........................................
.........................................
.........................................
You can add zIndex={1} to that purple view.
use right:0 in style
const s = StyleSheet.create({
view: {
padding: 2,
paddingHorizontal: 10,
backgroundColor: globalStyles.globalColor,
borderRadius: 6,
position: 'absolute',
top: -10,
left: 0,
right:0, //use this also
zIndex: 99999
},
text: {
fontFamily: globalStyles.font_light,
color: '#fff',
fontSize: 11,
textTransform: 'uppercase',
textShadowColor: '#fff',
textShadowOffset: {
height: 2,
width: 2
}
}
});
I want to change the color of the dropdown icon on the right of SectionedMultiSelect from the default color. Here is my code:
<SectionedMultiSelect
items={items}
IconRenderer={Icon}
uniqueKey="id"
// subKey="children"
selectText="Click to select Expertise"
showDropDowns={true}
onSelectedItemsChange={(selectedItems) => {
setDidUpdate(true);
setExpertise(selectedItems)
}}
selectedItems={expertise}
colors= {{
primary: 'red'
}}
styles={{
// chipText: {
// maxWidth: Dimensions.get('screen').width - 90,
// },
chipContainer : {
// backgroundColor: 'red',
// color: 'green',
borderRadius: 16,
borderWidth: 2,
borderColor: 'white',
marginTop: 10
},
chipText: {
color: 'white',
},
chipIcon: {
color: 'white',
},
button: {
backgroundColor: '#FF9017',
},
selectToggle: {
color: 'white',
},
selectToggleText: {
color: 'white',
// backgroundColor: 'red',
borderWidth: 2,
borderRadius:25,
borderColor: '#fff',
padding: 5,
paddingLeft: 15
},
}}
/>
I have tried changing it through the styles and the color props but to no avail.
I'm creating a list with ScrollView and trying to use touchable opacity on all of the rendered items. There is only 6 items in the list but I can only get touchableOpacity to work on the last 2 items.
I'm using touchableOpacity in a components folder and then importing it into a ScrollView on another screen. Any idea what I'm doing wrong or how I can fix the issue?
component code below
const FlatBench = (props) => {
return (
<View>
<ImageBackground
style={Styles.secondaryImages}
source={require("../assets/images/FlatBenchPress.png")}
>
<TouchableOpacity style={Styles.textContainer}>
<Text style={Styles.text}>Flat Bench</Text>
</TouchableOpacity>
</ImageBackground>
</View>
);
};
const Styles = StyleSheet.create({
secondaryImages: {
width: "90%",
height: "80%",
marginTop: 200,
shadowColor: "black",
shadowOffset: { width: 1, height: 2 },
shadowRadius: 6,
shadowOpacity: 0.26,
padding: 10,
width: 160,
height: 100,
borderRadius: 18,
},
textContainer: {
position: "absolute",
top: 0,
left: 0,
right: 0,
bottom: 0,
justifyContent: "center",
alignItems: "center",
backgroundColor: "black",
},
text: {
color: "#F5EDED",
fontSize: 20,
textAlign: "center",
},
});`
Screen ScrollView Code Below
const StatsScreen = (props) => {
return (
<View style={Styles.container}>
<View style={Styles.head}>
<BodyPartsImage style={Styles.top} />
<View style={Styles.top}>
<BigButton title="Body Parts" />
</View>
</View>
<ScrollView style={Styles.scrollContainer}>
<View style={Styles.bottom}>
<View style={Styles.topItem}>
<TouchableOpacity>
<FlatBench />
</TouchableOpacity>
</View>
<View style={Styles.topItem}>
<FlatBench />
</View>
<View style={Styles.bottomItem}>
<FlatBench />
</View>
<View style={Styles.bottomItem}>
<FlatBench />
</View>
<View style={Styles.bottomItem}>
<FlatBench />
</View>
<View style={Styles.bottomItem}>
<FlatBench />
</View>
</View>
</ScrollView>
</View>
);
};
const Styles = StyleSheet.create({
container: {
flex: 1,
},
scrollContainer: {},
top: {
flex: 1,
height: "1%",
alignItems: "center",
justifyContent: "center",
},
bottom: {
height: "50%",
flexDirection: "row",
flexWrap: "wrap",
marginTop: -100,
},
bottomItem: {
width: "50%",
height: "50%",
padding: 5,
marginBottom: -40,
shadowColor: "white",
shadowOffset: { width: 0, height: 2 },
shadowOpacity: 0.26,
shadowRadius: 6,
elevation: 1,
justifyContent: "center",
},
topItem: {
width: "50%",
height: "50%",
padding: 5,
marginBottom: 10,
shadowColor: "white",
shadowOffset: { width: 0, height: 2 },
shadowOpacity: 0.26,
shadowRadius: 6,
elevation: 1,
marginTop: -30,
},
buttonA: {
marginTop: -70,
marginLeft: "12%",
borderWidth: 5,
borderColor: "#d72323",
alignItems: "center",
justifyContent: "center",
width: 120,
height: 40,
backgroundColor: "#00000000",
borderRadius: 10,
},
head: {
paddingBottom: -100,
},
});
You need to refactor your spacings and find a better combination:
you have fixed height for every FlatBench but you are putting them in a fluid height container and doing negative margins.
So the FlatBench height and its (very big) margin are covering each other.
If you remove the following lines you can achieve your layout with positive margins on (bottom, bottomItem, topItem)
FlatBench style fix:
secondaryImages: {
// width: '90%',
// height: '80%',
// marginTop: 200,
shadowColor: 'black',
shadowOffset: { width: 1, height: 2 },
shadowRadius: 6,
shadowOpacity: 0.26,
padding: 10,
width: 160,
height: 100,
borderRadius: 18,
}
StatsScreen styles fix:
bottom: {
height: "50%",
flexDirection: "row",
flexWrap: "wrap",
// marginTop: -100,
},
bottomItem: {
width: "50%",
// height: '50%',
padding: 5,
// marginBottom: -40,
shadowColor: "white",
shadowOffset: { width: 0, height: 2 },
shadowOpacity: 0.26,
shadowRadius: 6,
elevation: 1,
justifyContent: "center",
},
topItem: {
width: "50%",
// height: '50%',
padding: 5,
// marginBottom: 10,
shadowColor: "white",
shadowOffset: { width: 0, height: 2 },
shadowOpacity: 0.26,
shadowRadius: 6,
elevation: 1,
// marginTop: -30,
}
Im just having an issues with creating a custom navigation tab bar and centering the icons vertically. It looks like it been pushed up a bit as per below screenshot:
This is the style i have for the tab navigation:
tabBarOptions: {
activeTintColor: '#e91e63',
labelStyle: {
fontSize: 12,
},
style: {
position: 'absolute',
backgroundColor: 'white',
width: DEVICE_WIDTH * 0.94,
borderBottomLeftRadius: 33,
borderBottomRightRadius: 33,
borderTopLeftRadius: 10,
borderTopRightRadius: 10,
bottom: 12,
marginLeft: '2.8%',
shadowColor: '#000000',
shadowOffset: {
width: 0,
height: 0.3
},
shadowRadius: 5,
shadowOpacity: 0.1
}
Many thanks!
Was able to fix this by specifying a style for the icon:
<Icon
name="user"
color={tintColor}
size={28}
style={{ textAlignVertical: 'center' }}
/>
My shadow is not working on iOS.
What am I doing wrong?
const styles = StyleSheet.create({
container: {
backgroundColor:'#F8F8F8',
alignItems:'center',
justifyContent:'center',
height:60,
paddingTop: 20,
borderBottomWidth:0,
shadowColor: '#000000',
shadowOffset: {
width: 0,
height: 5
},
shadowRadius: 10,
shadowOpacity: 0.5,
elevation:3,
position:'relative',
},
});
You can use this to generate shadows for both iOS and Android
React native shadow generator
In fact, I tried it and it works fine on my already created TouchableOpacity Text:
<TouchableOpacity style={styles.TestView} onPress={()=> { this.doAction; }}
>
<Text style={[styles.normalText, styles.headerText, { color: colors.lighterPrimaryColor }]}>
TEST
</Text>
</TouchableOpacity>
And in style:
privateMessagesView: {
flexDirection: 'row',
backgroundColor: '#F8F8F8',
alignItems: 'center',
justifyContent: 'center',
height: 60,
paddingTop: 20,
borderBottomWidth: 0,
shadowColor: '#000000',
shadowOffset: { width: 0, height: 5 },
shadowRadius: 10,
shadowOpacity: 0.5,
elevation: 3,
position: 'relative',
},
And here's the results on my android device:
If you want better results you can use react-native-cardview or you can use a card from a UI components library like native-base, react-native-material-design ..etc If you're using one.
Shadow in react native
import {Platform} from "react-native";
add below styles to View
{
backgroundColor: '#fff',
...Platform.select({
android: {
elevation: 2,
},
ios: {
shadowColor: '#000',
shadowOffset: {
width: 0,
height: 1,
},
shadowOpacity: 0.2,
shadowRadius: 1.41,
},
}),
}
Try this (working for me):
justifyContent: 'center',
alignItems: 'center',
backgroundColor: "#fff",
flexDirection: "row",
marginTop: 15,
height: 35,
width: 170,
marginHorizontal: 20,
marginBottom : 10,
shadowColor: '#000000',
shadowOffset: { width: 0, height: 1 },
shadowOpacity: 0.5,
shadowRadius: 5,
elevation: 1.5,
borderColor: '#e6e6e6'