Develop Reference

Horizontal scrollView not working on Android

I'm developing app with RN 0.69.6. I am trying to create scrollable item horizontally with ScrollView
Only on main screen in my app it works but on other screens in my app it doesn't work.
But, the scrolling it's also works on iOS but not on Android.
Output of npx react-native info System: OS: Windows 10 10.0.19044 CPU: (8) x64 Intel(R) Core(TM) i7-8565U CPU # 1.80GHz Memory: 1.95 GB / 11.85 GB Binaries: Node: 16.14.2 - C:\\Program Files\\nodejs\\node.EXE Yarn: 1.22.19 - \~\\AppData\\Roaming\\npm\\yarn.CMD npm: 8.17.0 - C:\\Program Files\\nodejs\\npm.CMD Watchman: Not Found SDKs: Android SDK: Not Found Windows SDK: Not Found IDEs: Android Studio: Not Found Visual Studio: Not Found Languages: Java: Not Found npmPackages: #react-native-community/cli: Not Found react: 18.0.0 =\> 18.0.0 react-native: 0.69.6 =\> 0.69.6 react-native-windows: Not Found npmGlobalPackages: react-native: Not Found
renderHighlightVideoBanner = (banners) => {
return (
<View style={styles.highlightOverflowContainer}>
<View style={styles.groupTitleContainer}>
<AdjustableText additionalStyle={styles.headerLabel}>What To Watch</AdjustableText>
</View>
<ScrollView
horizontal
showsHorizontalScrollIndicator={false}
contentContainerStyle={styles.horizontalScrollViewContainer}
>
{banners.data.map((value) => {
return (
<View style={styles.container}>
<TouchableOpacity
style={styles.touchableHighlightSliderContainer}
onPress={() => this.navigateToVideoScreen(value)}
>
<Image
resizeMode="cover"
style={styles.sliderImage}
source={{ uri: value.file_path + value.file_name }}
/>
</TouchableOpacity>
<View style={styles.highlightTitleLabelContainer}>
<AdjustableText heading="label" additionalStyle={styles.headerLabel}>{value.title}</AdjustableText>
<AdjustableText heading="label">{value.subtitle}</AdjustableText>
</View>
</View>
)
})}
</ScrollView>
</View>
)
}
The banner can scroll horizontally

FlatList automatically scrolls to first when data is too large in horizontal mode (RTL)

Environment
System:
OS: Windows 10
CPU: (4) x64 Intel(R) Core(TM) i5-7400 CPU # 3.00GHz
Memory: 1.35 GB / 7.87 GB
Binaries:
Node: 10.15.3 - C:\Program Files\nodejs\node.EXE
Yarn: 1.17.3 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
npm: 6.4.1 - C:\Program Files\nodejs\npm.CMD
IDEs:
Android Studio: Version 3.5.0.0 AI-191.8026.42.35.5791312
React Native version: 0.60.4
Code
<FlatList
style={{
flexDirection: 'row',
marginHorizontal: -wp('3%'),
zIndex: 40
}}
initialNumToRender={10}
data={this.state.data}
horizontal={true}
key={item => item.groupNo}
keyExtractor={(item, index) => index.toString()}
showsHorizontalScrollIndicator={false}
showsVerticalScrollIndicator={false}
ref={ref => (this.flatList = ref)}
renderItem={({ item }) => (
<Item item={item} />
)}
/>
Steps To Reproduce
Added some data to my FlatList
Add horizontal={true} property to flatlist
Set I18nManager.allowRTL(true)
Set I18nManager.forceRTL(true)
Make my renderItem component extend as PureComponent.
Using Real Android Device
As you see below when my app is running on RTL direction FlatList automatically scrolls to top/first of the list but LTR direction is OK!
RTL:
LTR:

I also have a same this problem, and my solution (you add them in your Flatlist).
Hope help you.
This link maybe help you improve your list:
https://github.com/filipemerker/flatlist-performance-tips
getItemLayout={(data, index) => (
{ length: LECTURE_ITEM_HEIGHT, offset: LECTURE_ITEM_HEIGHT * index, index }
)}
maxToRenderPerBatch={20}
initialNumToRender={10}
windowSize={10}
removeClippedSubviews={true}

it's a major issue, also causes a problem with react-native-calendars.
for now, you can check onScroll event, on init it causes major scroll event, you can simply return false there and block the scroll.
I hope a better solution will come in the next verisons.

try to make the trick as explained in example with onEndReached method.
https://snack.expo.io/r1NMSxFwr
Also try to play with initialNumToRender.

the best and easy way is to install this npm
https://www.npmjs.com/package/react-native-autoscroll-flatlist

Ionic 3 keyboard status bar showing after keyboard active

I am currently using Ionic 3 and I found a pretty weird bug(?). On android I use the fullscreen option in the config.xml and also in the app.component.ts file
config.xml:
<preference name="FullScreen" value="true" />
app.component.ts:
keyboard.disableScroll(true);
keyboard.hideKeyboardAccessoryBar(true);
this.androidFullScreen.isImmersiveModeSupported()
.then(() => this.androidFullScreen.immersiveMode())
.catch((error: any) => console.log(error));
statusBar.hide();
statusBar.overlaysWebView(false);
And it is working well until I start using an input and when the keyboard shows up the status bars are also get visible until a minimize the app and open again.
Here is a gif about the promlem:

I figured it out.
So the problem was the cordova plugin not installed properly and also throw an error because of some permission thing. If this also happening with your application just run this:
ionic cordova build android --verbose
This will also throw a permission error, but it will output the folder where you don't have the right permission and after run on the folder:
sudo chmod 755

Unable to load script from assets in React Native

I followed the instruction to install native-base from nativebase.io and to setup the project. I was successful at that, after running the command react-native run-android I get a successful message in the CMD telling
BUILD SUCCESSFUL
Total time: 15.051 secs
'adb' is not recognized as an internal or external command,
operable program or batch file.
Starting the app (C:\Users\DELL\AppData\Local\Android\sdk/platform-tools/adb
shell am start -n
com.awesomenativebase/com.awesomenativebase.MainActivity...
Starting: Intent { cmp=com.awesomenativebase/.MainActivity }
but, I get the following error in my App that is running in my physical device(Samsung kitkat 4.4.4):
My code in App.js:
import React, { Component } from 'react';
import { Container, Header, Title, Content, Footer, FooterTab, Button, Left,
Right, Body, Icon, Text } from 'native-base';
export default class AnatomyExample extends Component {
render() {
return (
<Container>
<Header>
<Left>
<Button transparent>
<Icon name='menu' />
</Button>
</Left>
<Body>
<Title>Header</Title>
</Body>
<Right />
</Header>
<Content>
<Text>
This is Content Section
</Text>
</Content>
<Footer>
<FooterTab>
<Button full>
<Text>Footer</Text>
</Button>
</FooterTab>
</Footer>
</Container>
);
}
Can anyone help on this? Thank you.

First make sure that the both devices (physical device & the device on which the code is running) on the same network.
Shake the physical device, it opens the debugger options.
Go to Dev Settings -> Debug server host & port for device.
It should be empty if you're device is connected by usb otherwise enter the ip address of your laptop followed by the port on which the packager is running.
For e.g 12:34:56:78:8081

Webview not showing any content(html) react native

Contents did showing up perfectly inside emulator and debug with real device but does not showing anything when testing out with real device (using released .apk). It just only showed blank container with white color. Or do i missed something?
<WebView
ref={(wView) => {this.wView = wView}}
javaScriptEnabled={true}
// onBridgeMessage={this.onBridgeMessage}
onMessage={this.onMessage}
injectedJavaScript="window.postMessage = String(Object.hasOwnProperty).replace('hasOwnProperty', 'postMessage');"
automaticallyAdjustContentInsets={false}
domStorageEnabled={true}
startInLoadingState={true}
source={mainHtml} <-- load with, var mainHtml = require('./MainHtml.html');
style={{width: 320,height:100,flex: 1}}/>
Environment
react-native-cli: 2.0.1
react-native: 0.43.4
react: 16.0.0-alpha.6
Device(ASUS Zenfone)
Android version 6.0.1

From what I've read here this is a known issue with Android when deploying in Release. The workaround is to point to the file with a uri:
{ uri: 'file:///pathto/file.html' }