We Keep Coding

Style chakra-ui mobile scrollbar and make always visible

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.)

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

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.

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?