I tried to create react native project and UI extends Component of #shoutem/ui,
But when i used NavigationBar of #shoutem/ui, i can't change color of content inside NavigationBar, like picture below here, News always got black color, how to change it to White color?
Here is my code:
<NavigationBar
style={{
container: {
position: 'relative',
width: Dimensions.get('window').width,
}
}}
leftComponent={(
<TouchableOpacity
style={{ paddingLeft: 10 }}
onPress={() => { this.props.navigation.navigate('DrawerOpen'); }}
>
<Image
styleName="small-avatar"
source={{ uri: 'https://scontent-hkg3-1.xx.fbcdn.net/v/t1.0-1/p160x160/17021999_1653807211588081_745686882439263143_n.jpg?oh=1dc68f938a820a9ccfea09033c0f4e34&oe=5987630B' }}
/>
</TouchableOpacity>
)}
centerComponent={
<DropDownMenu
selectedOption={this.state.selectedChannel ?
this.state.selectedChannel : this.state.channel[0]}
options={this.state.channel}
onOptionSelected={(channel) => this.onChoiceChannel(channel)}
titleProperty="name"
valueProperty="id"
/>}
/>
And here is my result:
Please help me fix this! Or suggest me someway can resolve it!
Thanks you guys so much!
The text color in NavigationBar is determined by the background color. If the background color is dark enough, NavigationBar will switch it's components to the "light-content", as seen in:
AppName/node_modules/#shoutem/ui/components/NavigationBar.js
function chooseBarStyle(bgColor) {
return color(bgColor).isDark() ? 'light-content' : 'default';
}
If you want to edit the color manually, you'll have to edit:
AppName/node_modules/#shoutem/ui/theme.js
title: {
fontFamily: 'Rubik-Regular',
fontStyle: 'normal',
fontWeight: 'normal',
fontSize: 20,
color: '#222222', //edit color here for your Title
}
Edit in response to comment:
The icon color is also edited in:
AppName/node_modules/#shoutem/ui/theme.js
navBarIconsColor: '#222222' //edit this line for your Icon
Related
Pretty simple question and concept here, I am using the react UI Kitten Framework for a React Native Project, and for the life of me I cannot change the styling on the TabBar's Tab components. I've looked at the documentation, and this is where it had lead me...
<View style={LandingPageStyles.container}>
<View style={LandingPageStyles.tabBarContainer}>
<TabBar
indicatorStyle={{color: '#ffffff !important', borderColor: '#ffffff !important'}}
tabBarStyle={LandingPageStyles.loginTab}
style={LandingPageStyles.tabBar}
selectedIndex={selectedIndex}
onSelect={index => setSelectedIndex(index)}
>
<Tab
title="Login"
tabBarStyle={LandingPageStyles.loginTab}
indicatorStyle={{color: '#ffffff !important', borderColor: '#ffffff !important'}}
tabBarStyle={LandingPageStyles.loginTab}/>
<Tab
title='Sign Up'
tabBarStyle={LandingPageStyles.signUpTab}
indicatorStyle={{color: '#ffffff !important', borderColor: '#ffffff !important'}}
tabBarStyle={LandingPageStyles.loginTab}/>
</TabBar>
</View>
<View>
{determineRender()}
</View>
</View>
And I have the following styleSheets...
const LandingPageStyles = StyleSheet.create({
container: {
width: maxWidth,
height: maxHeight,
},
tabBarContainer: {
marginTop: maxHeight * 0.045,
marginLeft: maxWidth * 0.075,
marginBottom: maxHeight * 0.06,
// borderWidth: 1,
// borderColor: 'black',
// width: maxWidth * 0.85,
},
tabBar: {
backgroundColor: 'rgba(52, 52, 52, 0.3) !important',
},
loginTab: {
borderBottomColor: "white",
color: 'white',
},
signUpTab: {
borderBottomColor: "white",
color: 'white',
}
})
Notice that I'm attempting to style the tabs themselves in anyway possible, adding style tabBarStyle and indicatorStyle anywhere it would be relevant. Unfortunately it does nothing and the text color is still some faded blue/grey instead of white, and the borderBottomColor of the selected tab is just blue. Am I shit out of luck an unable to style Kitten elements or is there something I'm missing?
For Changing certain styles in the react native ui kitten library, you would need to use something known as customize mappings.
You can follow the guide here:
Custom Component Mapping
Customizing mappinghttps://akveo.github.io/react-native-ui-kitten/docs/design-system/customize-mapping#customize-component-mapping
The tabview styles are very limited, your styles are ignored/overridden.
Customize component mapping is very cumbersome, lack of documentation, moreover you can't change the layout.
You have to render the components by yourself to fully control the styling
<TabView indicatorStyle={yourStyle} tabBarStyle={yourStyle}>
<Tab style={yourTabStyle}
/* instead of passing the string, you pass the function to render the title */
title={() => <Text style={yourTitleStyle}>Tab1</Text>}
/* same for icon */
icon={() => <Icon name='star' style={yourIconStyle}/>}
>
</TabView>
Inside my component (PrivacyPolicy.js), i have a header view, a webview, and a footer view. the webview, depending on the size, gets scrollable. my issue is that the footer view is displayed at the bottom of the screen like if its style was "position: 'absolute'" so it keeps displayed while scrolling. I need to have it after all webview is displayed.
<View style={styles.main_container}>
<View style={styles.header_container}>
...
</View>
<WebView originWhitelist={['*']} source={{ html: privacyPolicyContent }}/>
<View style={styles.footer_container}>
<CheckBox
disabled={false}
value={this.state.isChecked}
onValueChange={(newValue) => this.setState({
isChecked: newValue
})}
style={styles.checkbox}
tintColors={{ true: '#157dfa' }}
/>
<Text style={styles.checkbox_text}>I have read and accept the Privacy Polic</Text>
</View>
</View>
My styles:
const styles = StyleSheet.create({
main_container: {
flex: 1,
paddingHorizontal:'5%'
},
header_container: {
height: scale(90),
flexDirection: 'row',
marginLeft: 10
},
checkbox_container: {
flexDirection: 'row'
},
checkbox: {
marginLeft: -5,
},
checkbox_text: {
marginTop: 8,
fontSize: 10
}
})
I can see few suggestions:
Since your button is a React Native Button => You can show/hide based on the scrollY positions. For that, you need to communicate over the Bridge to dispatch an event accordingly.
As an alternative solution => You can create the button on the Webview its self to have the same functionality.
I want to adjust the outlined react-native-paper TextInput label color at the initial state (not onFocus). This is my OutlinedInput component:
import * as React from 'react';
import { TextInput } from 'react-native-paper';
const OutlinedInput = (props) => {
return (
<TextInput
mode='outlined'
label={props.label}
placeholder={props.placeholder}
placeholderTextColor='white'
secureTextEntry={props.secureTextEntry}
multiline={props.multiline}
keyboardType={props.keyboardType}
value={props.value}
onChangeText={(value) => props.onChangeText(value)}
style={props.style}
theme={props.theme}
/>
);
};
export default OutlinedInput;
In my Register component, I created an OutlinedInput component inside it:
<View style={{ justifyContent: 'center', alignItems: 'center' }}>
<OutlinedInput
label={'User Name'}
value={userName}
onChangeText={(userName) => setUserName(userName)}
style={{ color: 'white', backgroundColor: 'rgb(35,39,42)',
borderRadius: 5, width: '75%', height: '5%'
}}
theme={{ colors: { text: 'white', primary: 'rgb(33, 151, 186)' } }}
/>
</View>
I added this line at the top of Register component:
const [userName, setUserName] = useState('');
The screenshot of my program if I do not click the input:
This is the screenshout for clicking the input:
As you can see, the color of label User Name is black. I want to set this to white. When clicking on it, it works as expected, but the initial state of the color of the label is not what I want.
I tried to solve this problem using placeholder. I added placeholder props to the OutlinedInput and change placeholder color to white, but in this case, placeholder didn't become outlined. When I tried anything about placeholder, it didn't become outlined.
How can I adjust the label color to see it as white after opening the program?
You need to replace TextInput property:
placeholderTextColor='white'
with:
theme={{
colors: {
placeholder: 'white'
}
}}
In order to adjust label color in React Native Paper v5 you have to update this prop:
theme={{
colors: {
onSurfaceVariant: 'white'
}
}}
I don't get why they made it so unsemantic and inaccessible (it's not even in their Docs)
I created 2 Views that display overlaps to each others. The top and the bottom
When the bottom view background wasn't configured. It responded to the press event correctly. Let's say when I press on the overlap zone, it showed that the bottom one had been pressed
However, when I configured the bottom view backgroundColor. When I pressed on the overlap zone, on Android, it responded as I pressed on the top view which I think it's incorrect. (iOS it responded correctly that the bottom was pressed)
Steps To Reproduce
Provide a detailed list of steps that reproduce the issue.
Here is an example component
const OverlapseTouchExample = ({backgroundColor}) => {
const [pressedBox, setPressefBox] = React.useState('')
return (
<View>
<Text>{pressedBox} pressed</Text>
<TouchableOpacity style={[styles.box, {backgroundColor: 'blue'}]} onPress={() => setPressefBox('top')} />
<View style={backgroundColor ? { backgroundColor: 'orange' } : null}>
<View style={{marginTop: -75}}>
<TouchableOpacity style={[styles.boxBottom, backgroundColor ? { backgroundColor: 'green '} : null]} onPress={() => setPressefBox('bottom')} />
</View>
</View>
</View>
);
}
const styles = StyleSheet.create({
box: {
width: 150,
height: 150,
borderWidth: 1,
},
boxBottom: {
width: 120,
height: 200,
borderWidth: 1,
}
})
The problem found when set the backgroundColor to true
<OverlapseTouchExample backgroundColor={true} />
You could see it in Snack https://snack.expo.io/#gie3d/9b6c32 (Android)
I'm trying to create an image with a text on it, and in order for the the text to be clearly seen I need to make the image darker.
Also (don't sure if it matters or not) I need the background image to be touchable.
This question was asked several times here and I've seen some answers, but none of them worked for me, so I'm wondering if I'm missing something more crucial here.
My code is the following:
<View style={postStyles.container}>
<TouchableOpacity onPress={() =>
this.props.navigation.navigate('AnotherWindow')}>
<ImageBackground source={require('../../assets/images/my_img.jpg')}
style={{width: '100%', height: 150}}>
<Text style={postStyles.title} numberOfLines={2}>
My text
</Text>
</ImageBackground></TouchableOpacity>
From looking around here, I've tried the following solutions:
Tried to wrap the text element inside the imagebackground tag inside a
View element that has a style property of "backgroundColor" with value of 'rgba(255,0,0,0.5)' (also tried different values),
Tried to add this backgroundColor property to the styles of both the container itself, the TouchableOpacity element
Tried to above two solutions with the "elevation" property instead of backgroundColor (I work in Android).
None of the above solutions worked, in a sense that the background image didn't change at all, so I'm wondering if I'm missing something more crucial.
Thanks!
If anyone still having problems with the ImageBackground component, this is how i solved it, basically i set a view inside the image background which has the backgroundColor that darkens the image.
<ImageBackground
source={Images.background}
style={styles.imageBackground}
>
<View style={styles.innerContainer}>
{content}
</View>
</ImageBackground>
const styles = StyleSheet.create({
imageBackground: {
height: '100%',
width: '100%'
},
innerContainer: {
flex: 1,
backgroundColor: 'rgba(0,0,0, 0.60)'
},
});
if you want to make the image darker, you'll need the Image component and use the tintColor prop like:
<Image source={require('./your_image.png')} style={{ tintColor: 'cyan' }}>
this tintColor prop only works for Image component not ImageBackground, also if you want to add a text on the Image component, you'll need to positioning that text with position: 'absolute' or 'relative'
<View style={postStyles.container}>
<TouchableOpacity
onPress={() => his.props.navigation.navigate('AnotherWindow')}>}
>
<Image
source={require('./my_image.png')}
resizeMode="contain"
style={{ width: '100%', height: 150, tintColor: 'cyan' }}
/>
<Text style={postStyles.title} numberOfLines={2}>
My text
</Text>
</TouchableOpacity>
</View>
Also, if you implement this approach you'll need to calculate the dimensions of the screen for each device, well you'll need to check this other component from react-native: https://facebook.github.io/react-native/docs/dimensions
Please, let me know if this works :D
You should just add tintColor to ImageBackground imageStyle and you're done. easy peasy!
<TouchableOpacity onPress={() => this.props.navigation.navigate('AnotherWindow')}>
<ImageBackground source={require('../../assets/images/my_img.jpg')}
style={{width: '100%', height: 150}}
imageStyle={{tintColor: 'rgba(255,0,0,0.5)'}}>
<Text style={postStyles.title} numberOfLines={2}>
My text
</Text>
</ImageBackground>
</TouchableOpacity>