i have small issue with scrollview.
i want to the title become sticky and the after the title means the messageBody become scrollable.
i have tried below one for this implementation.
HelpComponentContainer:---
<View style={{ height: "100%" }}>
<ScrollView
style={{ flexGrow: 0 }}
>
<View>
<Title>{messageTitle}</Title>
<MessageBody>{messageBody}</MessageBody>
</View>
</ScrollView>
</View>
const MessageBody = styled(Text)`
color: #2d3e58;
text-align: right;
align-self: center;
width: 90%;
`;
i am using this component in
message-widget-card:--
<RBSheet
ref={helpSheet}
closeOnDragDown={true}
closeOnPressMask={true}
height={hp(60)}
customStyles={{
wrapper: {
backgroundColor: "rgba(52,52,52,0.8)",
},
draggableIcon: {
backgroundColor: "#d3d6dc",
},
container: {
borderRadius: 15,
},
}}
>
<Container>
<HelpComponentContainer
isHelpForMessage={true}
messageTitle={helpMessageTitle}
messageBody={helpMessage}
/>
</Container>
</RBSheet>
i have tried this one.
But the scroll is not working.
just i want the Blue color title should be sticky and the body become scrollable.
How can i resolve this issue?
Thanks!!
Try to implement like this keep the title outside ScrollView.
const HelpComponentContainer = () => {
return (
<View style={{flex: 1}}>
<Title>{messageTitle}</Title>
<ScrollView style={{flex: 1}}>
<MessageBody>{messageBody}</MessageBody>
</ScrollView>
</View>
);
};
export default HelpComponentContainer;
Related
I'm building a custom header. onPress event of the touchable opacity component is not working when I give components style prop - 'position:"absolute"' . But it works perfectly when I comment on the style property - position.
I couldn't find a solution for this elsewhere. Please help.
<Animated.View
style={{
elevation:
params !== undefined && params.elevation !== undefined
? params.elevation
: null,
position: "absolute",
top: 0,
left: 0,
backgroundColor:
params !== undefined && params.headerBgColor !== undefined
? params.headerBgColor
: "red",
width: "100%",
height:
params !== undefined && params.changingHeight !== undefined
? params.changingHeight
: 50,
justifyContent: "space-between",
alignItems: "center",
flexDirection: "row",
paddingHorizontal: 20
}}
>
<TouchableOpacity style={{}} onPress={() => console.log("hello")}>
<View style={{}}>
<Image
style={styles.menuIcon}
source={require("../../assets/images/Menu-512.png")}
/>
</View>
</TouchableOpacity>
<TouchableOpacity onPress={() => console.log("image")}>
<View style={{}}>
<Image
style={styles.profImage}
source={require("../../assets/images/user.png")}
/>
</View>
</TouchableOpacity>
</Animated.View>;
You should put your absolutely positioned Animated.View as the last child in the screen component. Otherwise, the view that occupies the rest of the screen will become the responder to touches.
const Screen = () => {
return <View style={{ flex: 1}}>
<View style={{flex: 1}}>
//actual screen content
</View>
<Animated.View // header
...props
></Animated.View>
</View>
In the DOM, the component that comes after another component is put "above" it. So, if you do this, your header will be above the actual screen content view and, therefore, become the responder when pressed.
its working on my case checkout below code:
or checkout my snack example : https://snack.expo.io/#immynk/header_demo
either you missing some params which are providing or getting null on condition check kindly confirm it hope this answer will help you
import * as React from 'react';
import {
Text,
View,
StyleSheet,
Animated,
TouchableOpacity,
Image,
} from 'react-native';
import Constants from 'expo-constants';
export default class App extends React.Component {
render() {
return (
<View>
<Text>Hello this is demo of flexdirection of box color</Text>
<Animated.View
style={{
position: 'absolute',
top: 0,
left: 0,
backgroundColor: 'red',
width: '100%',
height: 50,
justifyContent: 'space-between',
alignItems: 'center',
flexDirection: 'row',
paddingHorizontal: 20,
}}>
<TouchableOpacity style={{}} onPress={() => alert("hello","hello")}>
<View style={{}}>
<Image
source={{ uri: 'https://reactjs.org/logo-og.png' }}
style={{ width: 50, height: 65 }}
/>
</View>
</TouchableOpacity>
<TouchableOpacity style={{}} onPress={() => alert("hello","hello")}>
<View style={{}}>
<Image
source={{ uri: 'https://reactjs.org/logo-og.png' }}
style={{ width: 50, height: 65 }}
/>
</View>
</TouchableOpacity>
</Animated.View>
</View>
);
}
}
This is a React Native Question.
What I want to achieve is to prevent triggering the scroll event if user is dragging a particular part of a scrollView.
Minimal example:
<View style={{ width: '100%', flex: 1 }}>
<ScrollView>
<View style={{ width: '100%', height: 1600, backgroundColor: 'red' }}>
<View style={{ width: '100%', height: 600, backgroundColor: 'blue' }}/>
</View>
</ScrollView
</View>
How can I disable the drag detection (scrolling parent scrollView) of the at the blue part?
You can do a trick solution using onTouchStart and onTouchEnd events inside ScrollView.
Here is the code you can use,
constructor(props) {
super(props);
this.state = {
enabled: true
};
}
render() {
return (
<View style={{ width: '100%', flex: 1 }}>
<ScrollView
scrollEnabled={this.state.enabled}
onTouchStart={(event) => {
if (event.nativeEvent.locationY < 600) this.setState({ enabled: false });
}}
onTouchEnd={(event) => {
this.setState({ enabled: true });
}}
>
<View style={{ width: '100%', height: 1600, backgroundColor: 'red' }}>
<View style={{ width: '100%', height: 600, backgroundColor: 'blue' }}/>
</View>
</ScrollView>
</View>
);
}
This code only handles scrollEnabled according to your touch position on screen. If you start touching in blue area then it should block scrolling and once you release your finger then it should removes the blocking.
You can use a TouchableWithoutFeedback component to wrap your blue area and use its onPressIn event as a trigger to disable scrolling of the ScrollView. Use the onTouchEnd event on the ScrollView to enable scrollability again.
export default function MyComponent() {
const [scrollEnabled, setScrollEnabled] = useState(true);
return (
<ScrollView scrollEnabled={scrollEnabled} onTouchEnd={() => { setScrollEnabled(true); }}>
<View style={{ width: '100%', height: 1600, backgroundColor: 'red' }}>
<TouchableWithoutFeedback onPressIn={() => { setScrollEnabled(false); }}>
<View style={{ width: '100%', height: 600, backgroundColor: 'blue' }}/>
</TouchableWithoutFeedback>
</View>
</ScrollView
);
};
I'm brand new to react native. I'm trying to figure out how to make a box full height.
I have tried to add flex property to both container and view, but the height is not 100%.
export default class LinksScreen extends React.Component {
render() {
return (
<ScrollView style={styles.container}>
<View style={{ flex: 1, backgroundColor: '#fff', flexGrow: 1 }}>
<Text>Hallo</Text>
</View>
</ScrollView>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
flexDirection: 'column',
padding: 20,
backgroundColor: 'blue',
},
});
You need to wrap the ScrollView with a View that has height. ScrollViews must have a bounded height in order to work. You can read more details about that here: https://facebook.github.io/react-native/docs/scrollview
Do it something like below:
render() {
return (
<View style={styles.container}>
<View style={{height: 80}} >
<ScrollView
...
EDIT
Your code actually works. Maybe you just want to see if your scrollview works when the whole screen is occupied. Try this below and you will see, I simply multiplied the text contents 80 times:
render() {
return (
<ScrollView style={styles.container}>
<View style={{ flex: 1, backgroundColor: "#fff", flexGrow: 1 }}>
{Array(80)
.fill(1)
.map((item, index) => (
<Text>Hallo {index}</Text>
))}
</View>
</ScrollView>
);
}
Remove flex:1
Give height:"100%"
width: "100%"
My issue is, that i want the image is overflowing the Drawer
and does not fit the view width
I use contentComponent to have a custom Drawer.
the answer in the link below shows kinda what i want to achieve.
The issue though is, that width and heigth are given in absolute
values. This won't be working for tablet, iphones and android phones.
Any ideas?
export default StyleSheet.create({
...ApplicationStyles.screen,
container: {
//marginTop: Metrics.navBarHeight,
flex: 1,
flexDirection: 'column',
alignItems: 'stretch',
},
contentContainer: {
backgroundColor: 'transparent'
},
drawerImage: {
position: 'absolute',
top: 0,
left: 0,
right: 0,
bottom: 0,
opacity: 0.05,
backgroundColor: 'green'
// resizeMode: "stretch"
},
render () {
const { navigation } = this.props
return (
<View style={styles.container}>
<Image source={Images.drawerBackground} style={styles.drawerImage}/>
<ScrollView style={styles.contentContainer}>
<SafeAreaView forceInset={{ top: 'always', horizontal: 'never' }}>
<DrawerButton
iconName='ios-map'
text='Map'
onPress={() => navigation.navigate('MapView')}
/>
<DrawerButton
iconName='md-trending-up'
text='Elevation'
onPress={() => navigation.navigate('Elevation')}
/>
<DrawerButton
iconName='md-people'
text='Friends'
onPress={() => navigation.navigate('Friends')}
/>
<DrawerButton
iconName='md-person'
text='Profile'
onPress={() => navigation.navigate('Profile')}
/>
<DrawerButton
iconName='md-settings'
text='Settings'
onPress={() => navigation.navigate('Settings')}
/>
<View style={styles.checkinBtn}>
<CheckinButton
iconName='md-pin'
text='Checkin Location'
onPress={() => navigation.navigate('Settings')}
/>
</View>
</SafeAreaView>
</ScrollView>
<View style={styles.footer}>
<Text style={styles.text}>
........
</Text>
</View>
</View>
)
}
}
How to set a background Image of Navigator in React-Native
try using ImageBackground instead of Image and wrap all your elements into it
Refer the official docs here
import { ImageBackground } from "react-native";
<ImageBackground source={require('../../assets/images/AImg.png')} style={{ width: 100, height: 100}}>
//ur view/text flows here.....
</ImageBackground>
import and add ImageBackground
https://facebook.github.io/react-native/docs/images.html#background-image-via-nesting
I want to create a fullsize-screen with the child-view (a video player) that is rendered over the full size of the screen. I only get it work when i pass explicitly width and height to the component.
But i know that there is a property called "flex". In many tutorials they do something like "flex: 1", but for me it nowhere does what it is supposed to.
(For the sake of completeness, the video-player is not part of the question. I can also replace the <video> tag with <Image> or each other kind of view and get the same results)
render() {
const uri = this.props.uri
return (
<KeyboardAwareScrollView keyboardShouldPersistTaps="always" >
<TouchableWithoutFeedback onPress={RouterActions.pop}>
<Video source={{uri: uri}}
ref={(ref) => {
this.player = ref
}}
style={s.fullsize}
/>
</TouchableWithoutFeedback>
<TouchableOpacity onPress={RouterActions.pop} style={s.closeBtn}>
<Icon name="times-circle-o" size={20} color="white" />
</TouchableOpacity>
</KeyboardAwareScrollView>
)
}
My styles:
This is only working when i pass the width and height:
const s = StyleSheet.create({
fullsize: {
backgroundColor: 'black',
//flex: 1,
width: Dimensions.get('window').width,
height: Dimensions.get('window').height,
},
closeBtn: {
position: 'absolute',
left: 20,
top: 25,
},
});
I only tried out this one, but then the screen will be empty because of the -Component has a width and height of 0 each.
const s = StyleSheet.create({
fullsize: {
backgroundColor: 'black',
flex: 1, // this is not working
left: 0,
right: 0,
top: 0,
bottom: 0
},
});
I believe doing flex: 1 will make it take up all the space provided by it's parent element. In your case, none of your parent elements have any styling so try this out:
render() {
const uri = this.props.uri
return (
<View style={{ flex: 1 }}>
<TouchableWithoutFeedback style={{ flex: 1 }} onPress={RouterActions.pop}>
<Video source={{uri: uri}}
ref={(ref) => {
this.player = ref
}}
style={{ flex: 1 }}
/>
</TouchableWithoutFeedback>
<TouchableOpacity onPress={RouterActions.pop} style={s.closeBtn}>
<Icon name="times-circle-o" size={20} color="white" />
</TouchableOpacity>
</View>
)
}