We Keep Coding

Selecting react-select option causes page to jump

I am having some issues with a mobile modal I have been working on that uses react-select.
The selectors shown below are inside of a div with a fixed height and overflow-y: scroll. Whenever I selected an option for the select 'Choose observer', the entire modal will jump down in the viewport (shown in the last picture) for a split second, then return to normal. This will be quite jarring for the end user and it's an issue I would like to get fixed.
This only happens in certain screen orientations. On ipad it is in landscape mode and on iphone it is both orientations. This leads me to believe it is due to the height of the container but theres not much I can do about that as there is the header and navigation tabs.
I have tried several solutions including:
menuPosition="fixed"
blurInputOnSelect={false}
menuShouldScrollIntoView={false}
<Selector
ignoreAccents={false}
menuPortalTarget={menuPortalTarget}
components={{ DropdownIndicator }}
className={className}
options={options}
formatGroupLabel={CustomGroup}
isClearable={isClearable}
isDisabled={disabled}
styles={selectStyles}
placeholder={placeholder}
isSearchable={true}
getOptionValue={getOptionValue}
getOptionLabel={getOptionLabel}
onChange={onSelectedChange}
defaultValue={initialSelected}
controlShouldRenderValue={false}
filterOption={customFilter}
onCreateOption={onCreateOption}
menuPlacement={menuPlacement}
openMenuOnFocus={autoFocus}
autoFocus={!isMobileOrTabletDevice}
menuIsOpen
ref={(e) => (selectRef.current = e)}
id={id}
formatOptionLabel={formatOptionLabel}
isMulti={isMulti}
hideSelectedOptions
/>
const selectStyles = {
control: (provided) => ({
...provided,
margin: 8,
...props.controlStyle,
}),
menu: () => ({ borderTopRightRadius: 0, borderTopLeftRadius: 0 }),
menuList: (provided) => ({
...provided,
maxHeight: '185px',
}),
menuPortal: (base) => ({ ...base, zIndex: 9999 }),
};
If someone could point my in the right direction on how to fix this behavior that would be greatly appreciated. Thank you in advance.
Edit: So i've done some more investigating, and I believe the crux of the issue is that when selecting react select wants to scroll what you just selected into view. With the way I have my modal setup it is a fullscreen modal that overlays on top of a page that is larger than the viewport. When the modal opens I turn overflow hidden and height 100% to the body, but when selecting it still scrolls the page behind the modal.

menuShouldScrollIntoView ={false} adding this props into react-select solved my problem.

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 CSS to make parent container transparent

I am making an app whose footer is very much like that of Snapchat in that there's three icons that's opaque to the content below, but container is transparent. The effect should be similar to what's asked here w/ web css : How to make parent transparent but not the child?. My current footer is as follows:
<View style={appFooter.container}>
<Grid>
<Col size={17} > </Col>
<Col size={22} style={feedItem.centerItems}>
<Profile active={onProfile}/>
</Col>
<Col size={22} style={feedItem.centerItems} >
<Spice active={onFire} />
</Col>
<Col size={22} style={feedItem.centerItems}>
<News active={onNews} />
</Col>
<Col size={17} > </Col>
</Grid>
</View>
where the css is:
container : {
position: 'absolute'
, bottom : 0
, left : 0
, right : 0
, height : 50
// , backgroundColor: 'rgba(0,0,0,0.1)'
// '#00000000'
, opacity : 0.8
, flexDirection : 'column'
, justifyContent : 'center'
, alignItems : 'center'
},
As you can see in the comments, I have tried the solution rgba(...) but it does not give me the effect I want. Right now the opacity: 0.8 solution gives me a footer container and its children with 0.8 opacity. However ideally only the footer is transparent. The three children icons are opaque.

You cant do it as your try. When you set a component to 80% opacity, it and it's children have a maximum of 80%. Children can not ever go higher than that 80%.
The solution lies in your commented attempt. Often people want the background transparant, which is where then rgba() comes into play. Use that to set your transparency.
Possible solutions for making things transparant are:
Using opacity, which will also fade all it's children with it
Use rgba() and set the alpha to the desired opacity
Using an semi-transparant images as background
Positioning an absolute div in the element you want to be affected (which should be relative and transparant).

Try this:
backgroundColor: 'transparent'
There's a 'transparent' enum for backgroundColor.

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

React Native: ListView not displaying all rows

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?