Scrollview scrolls to the bottom normally but when I touch the TextInput and the keyboard pops up, it scrolls only a very short distance and I am not able to look at the content below.
Just focus on android as of now
android:windowSoftInputMode="adjustPan"
My code:
const Welcome = ({}) => {
return (
<View style={{flex:1}>
<View style={{height: RFValue(33), backgroundColor: '#B1C59B'}} />
<Main/>
</View>
);
};
where the Main component contains the scrollView
const Main = () => {
return (
<ScrollView
keyboardShouldPersistTaps="always"
contentContainerStyle={styles.container}>
{CONTENT}
</Scrollview>
)
}
const styles = StyleSheet.create({
container: {
flexGrow: 1,
},
Try adding flex:1 in your container style like
container:{
flex: 1,
}
Above Scrollview take SafeAreaView and give SafeAreaView flex:1 then your problem must be solved.
Related
I currently working in a React Native project using 'https://www.npmjs.com/package/react-native-raw-bottom-sheet' lib to handle bottom up panel.
I want to trigger bottom up panel everytime I click a button in parent component instead of clicking a button in child component, how do I can achieve this.
Bottom Up Panel child component:
const refRBSheet : any = useRef();
View style={styles.container}>
<View style={{width:200}}>
<Button title="OPEN BOTTOM SHEET" onPress={() => refRBSheet.current.open()} />
</View>
<RBSheet
ref={refRBSheet}
closeOnDragDown={true}
closeOnPressMask={true}
animationType='slide'
customStyles={{
wrapper: {
backgroundColor: "transparent"
},
draggableIcon: {
backgroundColor: "#999999"
},
container:{
backgroundColor:'#101010',
height:450,
}
}}
>
<MyComponent/>
</RBSheet>
</View>
My parent component:
<View>
<Button title="I want to click this button and trigger ButtomUpPanel/>
<BottomUpPanel/>
</View>
You need to use the useImperativeHandle hook in your parent
const refRBSheet : any = useRef();
const open = () => {
refRBSheet.current.open()
};
useImperativeHandle(refRBSheet, () => ({
open,
}));
Then pass the ref down to your components.
<View>
<Button onPress={()=>open()} title="I want to click this button and trigger ButtomUpPanel/>
<BottomUpPanel ref={refRBSheet} />
</View>
Remember useImperativeHandle should be used with forwardRef.
Actually after hours of researching I finally found a way for my own question:
To pass a ref to child component from parent component I use
forwardRef
By importing import
{forwardRef} from 'react';
Then in my case i just wrap my child component in forwardRef:
const DetailPanelBottomUp: FC<IDetailPanel> = forwardRef(
({imgUrl, title, contentUrl,value}, ref: any) => {
return (
<View style={styles.container}>
<RBSheet
ref={ref}
onClose={() => setSocialNet(false)}
closeOnDragDown={true}
closeOnPressMask={true}
animationType="slide"
customStyles={{
wrapper: {
backgroundColor: 'transparent',
},
draggableIcon: {
backgroundColor: '#999999',
},
container: {
backgroundColor: '#101010',
height: 450,
},
}}>
<MyComponent/>
</RBSheet>
</View>
And in my parent component I just declare
useRef
and its action then pass the ref to child component as a props
const refRBSheet : any = useRef();
const open = () => {
refRBSheet.current.open();
};
<View>
<DetailPanelBottomUp title={actionItem.title} contentUrl={actionItem.src} ref=
{refRBSheet} imgUrl={actionItem.src} />
<Button onPress={()=>open()} title="I want to click this button and trigger ButtomUpPanel/>
</View>
Trying to display a List item within renderRow.
I already implemented RTL in my project as defined on react native documentation, and I am getting a positive for console.log(I18nManager.isRTL ? 'yes' : 'no').
I am trying to present a designed table cell, so it's an image, on top of which I am trying to layout my items.
So the logo is defined in styles like this:
var styles = StyleSheet.create({
logo:{
position: 'absolute',
top:11,
right:11,
width: 26,
height: 26
}
frame: {
flex: 1,
flexDirection: 'row',
margin: 5,
},
txtFirstName:{
position:'absolute',
top:7,
right:40,
marginRight:36,
color:'white',
fontSize:PixelRatio.get()*4/PixelRatio.getFontScale(),
fontWeight:'bold',
textAlign:'right',
textShadowColor: 'black',
textShadowOffset: {width:2,height:2},
writingDirection : 'rtl'
},
txtSecondName:{
position:'absolute',
top:17,
right:40,
marginRight:36,
color:'white',
fontSize:PixelRatio.get()*3/PixelRatio.getFontScale(),
fontWeight:'bold',
textAlign:'right',
textShadowColor: 'black',
textShadowOffset: {width:2,height:2},
writingDirection : 'rtl'
},
txtMainText:{
position:'absolute',
marginRight:36,
color:'white',
fontWeight:'bold',
textAlign:'right',
textShadowColor: 'black',
textShadowOffset: {width:2,height:2},
writingDirection : 'rtl',
fontSize:PixelRatio.getPixelSizeForLayoutSize(3),
},
});
renderRow(rowData, sectionID, rowID) {
return(
<TouchableOpacity onPress={()=>this.showBusiness(rowData)}>
<View style={{flex:1}}>
<Image style={styles.logo} resizeMode = 'cover' source=}require('../images/logo.png’){/>
<Image source={require('../images/mainFrame.png’){ style={styles.frame}/>
<Text style={[styles.txtMainText,styles.txtFirstName]}>
טקסט
</Text>
<Text style={[styles.txtMainText,styles.txtSecondName]}>
מיושר לימין
</Text>
</View>
</TouchableOpacity>
);
}
The result is disappointing.
Here's how it should look like:
and here's how it is right now:
What bothers me most is that it used to look okay, and I am not sure what blew it this way.
Also, the "Loading" text shows on the right of the window when the app starts.
As according to the documentation: "we map the left/right styles from the JS side to start/end, all left in code for RTL layout becomes "right" on screen, and right in code becomes "left" on screen."... Have you considered using left instead of right for your positioning? Alternatively, consider using flex-start or flex-end for the desired result.
What I wanna do is creating a frame layout just like android's FrameLayout and I have failed several times reasonably. That's why I am here.
Expected scene:
1: Creating a map view in the bottom layer.(Native component)
2: Showing a marker on the map view. (Native component as above)
3: Placing a search widget on the top frame.(React component)
Here is the layout in a react-native page, named page.js:
<MapLayout>
<TextInput style={ marginTop: 20, borderRadius: 5, padding: 5, marginLeft: 16, marginRight: 16, width:100, height: 100 ,backgroundColor:'red'}} placeholder='search'></TextInput>
</MapLayout>
Note:MapLayout is a native component from android, which extends from FrameLayout and can be exported to React-Native. There is a MapView widget in the bottom layer as a background, probably with a overlay on the map.
Give me a hand please. Thanks for all kindness first.
you can do frame layout using this way
import React, { Component } from "react";
import { Animated, View, StyleSheet, Easing, Text } from "react-native";
class A extends Component {
constructor(props) {
super(props);
this.animatedValue = new Animated.Value(0);
}
handleAnimation = () => {
Animated.timing(this.animatedValue, {
toValue: 1,
duration: 500,
easing: Easing.ease
}).start();
};
render() {
return (
<View style={styles.container}>
<View style={styles.layer1} />
<View style={styles.overLay}>
<Text>This is an overlay area</Text>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1
},
layer1: {
height:100,
backgroundColor: "lightgreen",
},
overLay: {
height: 100,
width: "100%",
backgroundColor: "#00000070",
position: "absolute",
}
});
export default A;
In our React-native project, We have a screen which is having a parent Scrollview(with pull to refresh) and with in scrollview we have Listview (as chilld view).
In iOS we are able to scroll Scrollview(Parent) as well as Listview(child view).
But in android, We are not able to scroll the Child Listview. When we try to scroll the child Listview, The Parent view is getting scrolled. The child view is not getting the Touch.
Is this related to React-native issue? Can anyone tell me how to solve this issue?
Code snippet:
<ScrollView contentContainerStyle={styles.contentContainerStyle} refreshControl={this.getRefreshControl()}>
<View> Some header </View>
<MyComponent> </MyComponent>
<ListView /* This list view is not scrolling in Android */
dataSource={dataSource}
initialListSize={10}
renderRow={this.renderRow}
renderSeparator={this.renderSeparator}/>
</ScrollView>
I've done a ListView which is scrollable if you want !
ListBillScreen.js
export default class ListBillScreen extends React.Component{
/*Constructor*/
render() {
return (
<ScrollView style = {styles.container}>
<View style ={styles.header}>
<Text style = {styles.textHeader}> Title</Text>
</View>
<ListView
style={styles.listView}
dataSource={this.state.dataSource}
renderRow={(data) => <Row {...data} navigator={this.props.navigator} />}
renderSeparator={(sectionId, rowId) => <View key={rowId} style=
{styles.separator} />}
/>
<AndroidBackButton
onPress={this.popIfExists.bind(this)}
/>
</ScrollView>
);
}
}
Styles
import { StyleSheet } from 'react-native'
import { Colors, Metrics } from '../../Themes'
export default StyleSheet.create({
container: {
paddingTop: 20,
backgroundColor: Colors.background
},
separator: {
height: StyleSheet.hairlineWidth,
backgroundColor: '#8E8E8E',
},
textHeader: {
color: Colors.steel,
textAlign: 'center',
},
image: {
height:64,
width: 64,
},
listView: {
paddingTop: 10,
paddingBottom: 20
},
actionButtonIcon: {
fontSize: 20,
height: 22,
color: 'white',
},
})
It's fully scrollable even if you add some rows =) (My rows are created with a JSon File, with the Row.js)
Enjoy !
i think ur listview is small . Try setting flex: 1 or height: 587 on your ListView's style property. –
Both listview and scrollview touch events are conflicting.
Try using below code in your fragment/activity
listview.setOnTouchListener(new OnTouchListener() {
#Override
public boolean onTouch(View v, MotionEvent event) {
v.getParent().requestDisallowInterceptTouchEvent(true);
return false;
}
});
You need to set nestedScrollEnabled = true for ListView.
I am trying to use the react-native-chart-android library for including charts in my android app.
I installed the module successfully and went through the provided examples as is. Everything went fine without errors but the graphs are not getting rendered somehow.
I am trying out the LineChart (which is itself in a separate View) within a ScrollView along with ToolbarAndroid and one more View on the same level on RN 0.20. Do let me know if I am missing something.
Thanks in advance.. :)
PS: Code snippet for reference (removed the trivial parts of the code for better visualisation)
import {
LineChart
} from 'react-native-chart-android';
class Dashboard extends Component {
render() {
return (
<ScrollView style={styles.scrollView}>
<ToolbarAndroid ... />
<View style={styles.container}>
...
</View>
<View style={styles.chartContainer}>
<LineChart style={{flex:1}} data={this.getLineData()}/>
<LineChart
style={{flex:1}}
data={this.getRandomData()}
visibleXRange={[0,30]}
maxVisibleValueCount={50}
xAxis={{drawGridLines:false,gridLineWidth:1,position:"BOTTOM"}}
yAxisRight={{enable:false}}
yAxis={{startAtZero:false,drawGridLines:false,position:"INSIDE_CHART"}}
drawGridBackground={false}
backgroundColor={"BLACK"}
description={"description"}
legend={{enable:true,position:'ABOVE_CHART_LEFT',direction:"LEFT_TO_RIGHT"}} />
</View>
<Text style={styles.description}>{this.state.message}</Text>
</ScrollView>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'stretch',
backgroundColor: '#F5FCFF'
},
scrollView: {
flex: 1
},
chartContainer: {
flex: 1
}
});
I had same problem, my conclusion was that ScrollView renders only children with height and width. Although you set flex:1 around charts, I think they are larger then ScrollView and that's why they are not visible inside of ScrollView. I've set height and width to my charts, and gave them min and max Y -> if you set flag startAtZero:false you should set axisMinValue and axisMaxValue. For example: yAxis={{startAtZero:false,drawGridLines:false,position:"INSIDE_CHART", axisMinValue: 20, axisMaxValue: 500}}
And for charts try to set custom width and height:
chartContainer: {
flex: 1,
height: 500, //any value you want
width: 500 //any value you want
}
I've set half of device height and full width with Dimensions:
import { Dimensions } from 'react-native';
var {height, width} = Dimensions.get('window');
chartContainer: {
flex: 1,
height: height/2,
width: width
}
And after that my charts are visible inside of ScrollView!
Hope it helps! :)