I'm trying to set the navigation bar to translucent on android.
Take a look at the image for example:
(source: morenews.pk)
I tried using react-native-navigation-bar-color but it only allows me to hide nav bar / show nav bar / change the color of nav bar.
So using this navigation bar library, I attempted to set changeNavigationBarColor('transparent'); but it made my app crash.
I've also tried setting android:fitsSystemWindows="true" in AndroidManifest.xml which I brought from here, but unfortunately nothing changed.
A good way to get a translucent navigation and status bar is to add 3 style items to android > app > src > main > res > values > styles.xml
These will set the bottom navigator bar to translucent:
<item name="android:navigationBarColor">#android:color/transparent</item>
<item name="android:windowTranslucentNavigation">true</item>
This one sets the top status bar to translucent:
<item name="android:windowTranslucentStatus">true</item>
Example of implementation in styles.xml:
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.DayNight.NoActionBar">
<!-- Customize your theme here. -->
<item name="android:textColor">#000000</item>
<!-- Make status & navigation bar translucent -->
<item name="android:navigationBarColor">#android:color/transparent</item>
<item name="android:windowTranslucentNavigation">true</item>
<item name="android:windowTranslucentStatus">true</item>
</style>
</resources>
This will make your content render below the status and navigation bar.
To fix this you can use react-native-safe-area-context to get the safe area insets.
Example for a safe content view:
import { SafeAreaInsetsContext } from "react-native-safe-area-context";
const ContentView = (props) => {
const safeInsets = useContext(SafeAreaInsetsContext);
return (
<View
style={[
{
marginLeft: safeInsets?.left,
marginTop: safeInsets?.top,
marginRight: safeInsets?.right,
marginBottom: safeInsets?.bottom
}
]}
>
{props.children}
</View>
);
}
So I took a look into the module and what it's doing and found that it's just using the native android Color library to parse the string.
(Docs for it can be found here: https://developer.android.com/reference/android/graphics/Color)
I was able to get the nav bar transparency using the #AARRGGBB pattern specified in the docs. 3 or 4 letter Hex strings are not supported, and rgb strings are not supported. Some color names are listed as supported but transparent is not one of them.
Unfortunately, even though I was able to set the nav bar to be fully transparent, I wasn't able to get the app to actually draw anything behind it, so fully transparent actually just ends up being white, and anything in between is a transparency relative to that white background.
You do not seem to accept string values. Would you like to try this?
changeNavigationBarColor('rgba(0,0,0,0)',true)
We need to make custom navigation bar and add safe area to it.And then give your required colour to safe area. Below, is the example,
<ImageBackground style={{flex:1, backgroundColor: 'silver'}} source={require('./des.jpeg')}>
<SafeAreaView style={{backgroundColor: 'transparent'}}/>
</ImageBackground>
You just add this lines to app.json:
"androidNavigationBar": {
"visible": "sticky-immersive"
},
Related
In my App.js i have set :
import * as NavigationBar from "expo-navigation-bar";
...In my component
useEffect(() => {
if (android) {
NavigationBar.setBackgroundColorAsync("transparent");
}
}, []);
which sets my navigation bars transparent in all screens,but when a modal is visible :
<Modal
animationType="none"
transparent
visible={isVisible}
presentationStyle="overFullScreen"
hardwareAccelerated
>
...navigation bar becomes white,even when i try to set it also within my modal component as well,any known solutions for this ?
I had this problem in Android as well. What I believe is happening is the react-native modal is simply taking the default android:navigationBarColor in the styles.xml and so every time it pops up, it overwrites the current navigation bar color until it gets dismissed.
The flag statusBarTranslucent did not work for me.
I was able to fix this by navigating to /res/values/styles.xml in your app or src folder
It really helps if you change your view style to "Android"
then
Then in the AppTheme style I added navigationBarColor to be transparent.
It looks like this
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="android:textColor">#android:color/black</item>
<item name="android:navigationBarColor">#android:color/transparent</item> // <----This is what I added
</style>
Then in my react native code, I used react-native-navigation-bar-color. I believe this should work with expo-navigation-bar since the main issue is derived from react native modal trying to overlay the default navBarColor value.
import changeNavigationBarColor from "react-native-navigation-bar-color";
const setDarkMode = (isDarkMode: boolean) => {
// logic to change my app's themeProvider to dark mode
changeNavigationBarColor(isDarkMode ? "black" : "white"); // Then I change the navigation bar color.
};
Hopefully this helps someone!
so the styling in the css={{....}} property gets applied in my browser, but not in Safari on my iPhone. How do i add styling for iOs Safari, and also how can i make it, so that the scrollbar doesn't disappear and is always visible?
The only style which seems to get applied on iPhone is the webkit-scrollbar-track witdh. (i tested by setting the width to 100px)
I already tried this and this, in order to make the scrollbar always visible, but with no success. Below is the code and images of the scroll component on iPhone and Google Chrome on my Mac.
I also tried using both sx={{....}} css={{....}} while testing. But no difference.
<MenuList
variant={"outline"}
bgColor={"#000000"}
rounded={10}
borderColor={"blue.200"}
>
<Box
css={{
"&::-webkit-scrollbar": {
width: "4px",
},
"&::-webkit-scrollbar-track": {
width: "6px",
},
"&::-webkit-scrollbar-thumb": {
background: "#8ccef0",
borderRadius: "24px",
},
}}
overflowX="auto"
maxHeight="200px"
>
{coinsList
.map(({ label, path }) => (
<MenuItem
pt={1}
pb={1}
key={path}
as={Link}
to={path}
color={dropDownValue === label ? undefined : "blue.200"}
>
{label}
</MenuItem>
))}
</Box>
</MenuList>
Menu in Google Chrome on my Mac. Handlebar always visible and styled(blue color):
Menu in Safari on my iPhone. Handlebar only visible while scrolling and not styled(grey color, thinner, only track-width style gets applied):
[
[EDIT] While looking on the images after posting the question i noticed, that the whole menu is grey on mobile image. This is due to sending the image to my Mac using Telegram. It is actually the same blue color as the Chrome image, except for handlebar (just for clarification.)
I'm trying to setup React-Stripe-Elements and while I was able to get the basic form to render, it does so in a really funky looking way. I even tried to add CSS from a form I found online and it won't render in the CardElement properly. How can I get React-Stripe-Elements to render with the proper UI or UI that even remotely resembles the UI on the docs?
The CardElement is currently rendering like:
And my card element file looks like:
import React from 'react';
import {CardElement} from 'react-stripe-elements';
class CardSection extends React.Component {
render() {
return (
<label>
Card details
<CardElement style= {{ base: { color: '#fff',
fontWeight: 500,
fontFamily: 'Roboto, Open Sans, Segoe UI, sans-serif',
fontSize: '15px',
fontSmoothing: 'antialiased' }}} />
</label>
);
}
};
export default CardSection;
I'm not sure what your definition of "funky" is - it might be better to add a link to a specific element and state what is different than you expect.
If I were to guess, I would say a few things are probably not as you like:
100% width - I think the package assumes you want a 100% width input. For example, I have all my inputs 100% but they are in containers of the smaller width that I want on the screen.
No border - you can add a border if you like. The input is usually more visible when the page has a background color other than white.
Height or padding - this could be a function of not seeing the true borders.
You can check out some more styling options that they use in their demo here: https://github.com/stripe/react-stripe-elements/blob/master/demo/demo/index.js
This answer might also be helpful https://stackoverflow.com/a/43986418/5049215
I want to work on some apps that will navigate into video.js file that will automatically trigger the video to play in fullscreen with landscape orientation.
I'm using react-native-video
link: https://github.com/react-native-community/react-native-video
render() {
return (
<View style={styles.container}>
<View style={styles.fullScreen}>
<Video
ref={(ref) => {
this.player = ref
}}
source={require('../vid/intro-video.mp4')}
style={styles.nativeVideoControls}
rate={this.state.rate}
paused={this.state.paused}
volume={this.state.volume}
muted={this.state.muted}
resizeMode={this.state.resizeMode}
onLoad={this.onLoad}
onLoadStart={this.loadStart}
onBuffer={this.onBuffer}
onProgress={this.onProgress}
onEnd={debounce(this.onEnd, 100)}
repeat={false}
controls={this.state.controls}
/>
</View>
</View>
);
}
I try to add this belo code inside loadStart function but it's not working.. and when I rotate the video appear at the bottom of my screen if not in fullscreen mode.
this.player.presentFullscreenPlayer()
solution that I tried:
1) using onLayout on the view tag but nothing happened.
2) using this.player.presentFullscreenPlayer() still did not fix the problem.
I still did not find a fix solution for this problem but I just want to share workaround that I did for temporary.
I'm using another package react-native-orientation and trigger lockToLandscape() inside the componentWillMount and then I get the width and height of the device using dimension
Orientation.lockToLandscape();
height = Dimensions.get('window').height;
width = Dimensions.get('window').width;
and I also add the presentFullScreenPlayer inside onLoad method
this.player.presentFullscreenPlayer();
and that I set the width and the height of the video player using the width and height get from the Dimensions of the device...
If you guys have another ways, do share :)
Thanks
I'm trying to display a list of rows in a React Native ListView, but it only shows the entries that fit in a single screen, ie, I can't scroll down to see more rows.
Here are the styles:
styles = StyleSheet.create({
container: {
flex: 1,
marginTop: 60
},
rowContainer: {
flexDirection: 'row',
justifyContent: 'space-around'
}
})
ListView:
return (
<View style={styles.container}>
{this.getHeader()}
<ListView
dataSource = {this.state.dataSource}
renderRow = {this.renderRow.bind(this)}/>
</View>
)
Row:
return (
<View style={styles.rowContainer}>
<Text>{text}</Text>
</View>
)
What am I doing wrong?
I had the same issue and found that Listview with wrapper View outside will make ListView not scrollable.
The workaround will be removing wrapper View:
return (
<ListView
dataSource = {this.state.dataSource}
renderRow = {this.renderRow.bind(this)}/>
)
I'll post this here in spite of the OP already having found a solution b/c my ListView wouldn't scroll either and it wasn't b/c I was trying to scroll rather than using the mouse to simulate swiping. I am currently using React-Native v0.1.7.
It turned out that the reason my ListView wouldn't scroll & wouldn't reveal the other rows which weren't being initially rendered on screen was that it didn't have a fixed height. Giving it a fixed height solved this issue. Figuring out how to determine what value to use for the height wasn't a simple matter though.
In addition to the ListView on the page there was also a header at the top of the page which had a fixed height. I wanted that ListView to take up the remaining height. Here, either my ability to use the React-Native limited implementation of FlexBox failed me or the implementation did. However, I was unable to get the ListView to fill up the remainder of the space and be able to scroll properly.
What I did was to require the Dimensions package const Dimensions = require('Dimensions'); and then set a variable for the device window's dimensions const windowDims = Dimensions.get('window'); Once I had that done I was able to determine the height of the remaining space and apply that inline to the style of the ListView: <ListView style={{height: windowDims.height - 125}} ... /> where 125 was the height of the header.
What worked for me was to follow this response: https://stackoverflow.com/a/31500751/1164011
Basically, I had
<View>
<ListView/>
</View>
And what was happening was that the <View> component was getting a height of 0. So I needed to update it to:
<View style={{ flex: 1 }}>
<ListView/>
</View>
That way <View> gets its height based on the content.
Wrap listview and other contents in scroll view.. That solved my scroll issue.
ListView contains an inner ScrollView so it should work as is. On the simulator your scroll by clicking and dragging the mouse.
Why don't you show the full code, maybe some screenshots?