We Keep Coding

How to add createStackNavigator inside ImageBackround of view to have common background image?

I am trying to import createStackNavigator from an external file and add it inside ImageBackground of View so that I can have common flow of backround image from top to bottom but I am getting errors like
TypeError: No "routes" found in navigation state
Code:
<View style={styles1}>
<ImageBackground source={{uri: 'https://upload.wikimedia.org/wikipedia/commons/3/36/Hopetoun_falls.jpg' }} style={{width: '100%', height: '100%'}}>
<componentNavigator style={{ backgroundColor: 'transparent' }} navigation={navigation} />
<View></View>
</ImageBackground>
{/*</ImageBackground>*/}
</View >
To fix the above issue I added
static router = AccountsNavigator.router; // added it below constructor
Then I am getting Connot readt propery 'router' of undefined
I am not sure how to fix it, even if it fixed will it take the flow og background image?

I have found the solution, by adding headerTransparent: true inside navigationOptions, I can able to achieve transparent background though I had to position the below container with position: absolute

React Native Android Navigation Bar Translucent

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"
},

React native scroll sub column

I have a View like this
<View style={styles.columnView}>
<View style={[styles.columnButtonItem, styles.columnC]}><Text></Text></View>
<View style={[styles.columnButtonItem, styles.columnA]}><Text></Text></View>
<View style={[styles.columnButtonItem, styles.columnB]}><Text></Text></View>
<View style={[styles.columnButtonItem, styles.columnE]}><Text>{value}</Text></View>
<View style={[styles.columnButtonItem, styles.columnAs]}><Text></Text></View>
<View style={[styles.columnButtonItem, styles.columnT]}><Text></Text></View>
</View>
After iterations, I compose a table like this:
There is a way to add ScroolView on a single column?
For example, I want to enable scroll only on columnE.
Obviously, when i scroll columnE I want to scroll all the table.
Thanks

Absolutely positioned Views
If you know the width of the columns then you could use Views that are absolutely positioned that overlap the underlying ScrollView, they would stop all touches to the ScrollView. Meaning that it would only scroll on the part that isn't covered by the absolutely positioned views.
So you could do something like this
render() {
// set these widths to be the size before row E and the size after row E
let leftWidth = '33%';
let rightWidth = '33%';
return (
<View style={{flex: 1}}>
<ScrollView style={{flex: 1}}>
// items for the scroll view go here
</ScrollView>
<View style={{position:'absolute', top:0, left: 0, bottom: 0, width: leftWidth}} />
<View style={{position:'absolute', top:0, right: 0, bottom: 0, width: rightWidth}} />
</View>
)
}
Snack
Here is a snack showing this implementation. I have set a backgroundColor on the absolutely positioned views so that you can clearly see them.
https://snack.expo.io/#andypandy/partial-scrollview
Caveat
The main problem with this solution is that you will not be able to touch anything that is below the absolutely positioned views. You could mitigate that by capturing touches using gestures on each View and then mapping them to positions on the ScrollView.

I (think) this is what you're looking for... essentially you can only scroll the far right column and the rest of the columns are not scrollable. Because of that, you have to wait for the native event handler of ScrollView to propagate any change before you render the fact that the rest of those 4 columns are scrolling though.
https://snack.expo.io/#vincentvella/scroll-example

Lock video to landscape fullscreen orientation (react-native-video)

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

ScrollView minHeight to take up all the space

I have a ScrollView which content doesn't necessarily exceeds it's size. Let's say it's a form where, upon errors, it expands to add error messages and then it exceeds the ScrollView size and thus is why I'm using that scroll.
The thing is that I want the content to always be at least of the same size of the ScrollView. I'm aware of the minHeight property, but the only way I found to use it is re-rendering, which I'd like to avoid.
I'm using redux for state management and this is what I have
<ScrollView
contentContainerStyle={[ownStyles.container, {minHeight: this.props.scrollHeight}]}
style={this.props.style}
showsVerticalScrollIndicator={false}
onLayout={(event) => {
scrollHeight = event.nativeEvent.layout.height;
this.props.setScrollContentHeight(scrollHeight);
}}
>
Where the this.props.setScrollContentHeight triggers an action which enters the height on the state, and this.props.scrollHeight is said height. So that after the first render where the onLayout function is triggered, the state is updated with the ScrollView's height, which I then assign as minHeight to its content.
If I set the content's style to flex: 1 then the ScrollView won't scroll.
Can you think of a way to avoid that second render for performance purposes?
Thank you!

You should use flexGrow: 1 for the ScrollView and flex: 1 inside the ScrollView, to get a ScrollAble but at least as big as possible <View>.
There has been a discussion about it in react-native and tushar-singh had the great idea to it.

It has been a long time but I struggled with the same issue. The easy way to do it is to use flexGrow: 1 instead of flex:1 on both scrollView's style and contentContainerStyle props. The content will take at least 100% of space and more if needed.

A couple of solutions of doing this are:
Use a minHeight on the ScrollView (but this requires taking into account the screen dimension to render correctly)
Use a flexGrow: 1 on the ScrollView contentContainerStyle and a flex: 1 to the inner content:
<ScrollView contentContainerStyle={{ flexGrow: 1 }}>
<View style={{ flex: 1 }}>
...
</View>
</ScrollView>

i want to share my solution, for me nothing of https://github.com/facebook/react-native/issues/4099 worked. Also i cannot comment there because facebook blocked the thread ¬.¬ !
Basically my solution is set flexGrow: 1 in contentContainerStyle on the ScrollView component, and wrap all the content inside in a View component with a height property setted with the screen size. Here the example code:
import { Dimensions } from "react-native";
let screenHeight = Dimensions.get('window').height;
<ScrollView contentContainerStyle={{ flexGrow: 1 }}>
<View style={{height: screenHeight}}>
... your content here ...
</View>
</ScrollView>

I know this is a little late, but I think wrapping the contents inside of that ScrollView with a View with minHeight style property will do the trick.

<ScrollView contentContainerStyle={{ flexGrow: 1 }}>
<View style={{ flexGrow: 1 }}>
Your content
</View>
</ScrollView>
That worked for me.