On Android (and possibly iOS, I haven't tested), there is a problem with scrolling text with a React Native Scrollview. I am attempting to create a text block component that flexes to fill the remaining space of the page with text rendered inside of it. That works.
My problem is that this text needs to be easily scrollable. In my application, I can not make minor scrolling adjustments to the text in this field. (Think about scrolling on Instagram, you can scroll up or down in very small gestures).
This text in the scrollview does not scroll unless you give it a very long and quick flick of the finger. It does scroll and it scrolls correctly functionality-wise, the user experience is just awful.
It's as if it doesn't get recognized as a scroll view unless you scroll it a massive amount.
This happens with normal text elements getting passed into props.children. I am just setting fontSize on the text elements so that the text is bigger. Right now the text font size is set to 60 so that I can test the scrolling functionality.
Here is my text block code:
const TextBlock = (props) => {
return (
<View style={{...props.style, ...styles.container}}>
<ScrollView style={styles.scrollView} contentContainerStyle={{flexGrow: 1}}>
{props.children}
</ScrollView>
</View>
);
};
const styles = StyleSheet.create({
container: {
backgroundColor: Colors.whiteBackgroundColor,
paddingHorizontal: 18,
paddingVertical: 10,
borderRadius: 20,
width: '90%',
flex: 1
}
});
Any help on this would be greatly appreciated. I've tried putting a flex grow on the inner elements. I have tried wrapping the inside text in another view (both with and without flex attributes). I have tried removing the flex altogether.
Please let me know if there's some way to fix this.
Related
I have task where I need to change the statusbar from white and make the content dark. Now I search how the statusbar implement to the component. Yes it works properly. Later on I experience bugs where If I re render the entire application I mean when I re open the application again. the status bar that I change it turns to the original color which is blue. so to make more details I will show you the code that I implement and the screenshot of my application that I created.
Here is some research that I read:
Reference
I don't think there is any conflict between react-navigation and the StatusBar, but I think you should use the component rather than the imperative API. There's a high chance this is due to a re-render of your app and it just switch back to the default, with a component declare, you ensure it won't happen.
Goal: To make the statusbar won't change to blue if I re open the application again.
Here is what I implement on my application:
React Navigation 5 (For Navigation)
Native Base
Statusbar:
<StatusBar hidden={false} animated barStyle="dark-content" backgroundColor="#FFFF" />
Bug Status Bar:
Goal Status Bar:
Code Works might only for the android device as we have to manage the safeAreaView in iOS device
Check out the below code example to show the custom status bar color.
<View style={{ flex: 1 }} >
<StatusBar animated backgroundColor="pink" barStyle="dark-content" />
<View style={{ flex: 1, backgroundColor: "green" }} >
</View>
</View>
Might you will be able to see the status bar color pink and dark content into it and whole screen with green color.
I am using React Native Navigation top tabs. I am having a issue with the text getting cut or wrap. Is there any way that I can style where all the tab names show correctly without text wrap
Set a width to the tabbar, like this
tabBarOptions: {
tabStyle: {
width: 'auto' //or put some other width which works for you
}}
Also consider using scrollable tabs or reducing font size.
This is from a Udacity flashcard project. Say I have this screen:
A "Next card" button appears conditionally upon the user hitting "Correct" or "Incorrect" (a value gets set in component state and the button is rendered conditional on that value being true):
All of this content is inside a <View> with alignItems: 'center' and justifyContent: 'center', so when the button appears, everything shifts slightly along the vertical axis.
I'd like to create some kind of "blank" placeholder that will have the exact same size as the "Next card" button and have it "render" before the Correct/Incorrect button is hit, so that this shift does not occur.
I recognize I could set a hard height/width on the button and make some kind of placeholder item with the same size, but this is a general question and I'd like to leave appearance to device defaults as much as possible.
Is this possible, and/or a sensible approach? If not, why not, and what would you suggest instead?
Thank you!
I assume you're doing something like this to render the Next Card button.
{this.state.answerSubmitted && (
<TouchableOpacity>
<Text>Next Card</Text>
</TouchableOpacity>
)}
Instead, you could do something like this, your button will be there, just not visible and clickable.
<TouchableOpacity
disabled={!this.state.answerSubmitted}
style={{opacity: this.state.answerSubmitted ? 1 : 0}}
>
<Text>Next Card</Text>
</TouchableOpacity>
If you already have a style for the button, you can use the array notation.
style={[styles.yourStyle, {opacity: this.state.answerSubmitted ? 1 : 0}]}
I want a mini drawer on the left of my screen, like the example on the Material UI Documentation:
But in my case I want it to float over the content (like the variant="temporary" version of the component) when it opens, as currently it pushes the content.
If I handle the open prop to change the variant style dynamically it doesn't look very nice.
Is there any way of achieving this?
If you set the content's styling like this, it's position will not be effected by the drawer's state as you set its position to be absolute:
content: {
position: "absolute",
marginLeft: theme.spacing.unit * 7 + 1,
padding: theme.spacing.unit * 3
}
The Header text will ofcourse shift to the left when you open the drawer.
EDIT: I am going off of the codesanbox Material UI demo for the mini variant drawer here.
I'm completely new on React and i want to check out, if my idea is possible.
I want to create an website with following layout:
The green side is an collapsible navigation. On the sample screen, the navigation is showing. If an user want to hide the navigation, these will be toggled (like bootstrap navigations) with an smaller width.
The content will be stretched to the rest of complete width.
If you click on an link (depend on which link), a new view will be inserted on the left or right side on the content (see exmaples). The maximum of "Subviews" is 3.
Is these layout possible?
I want lot's of ideas and food for thought!
Yes, it is possible. You want to look into flexbox and how it works in RN and also you can take a look at react-native-navigation (wix), which provides both the left and right drawer.
If you want to do it yourself, basically you want to do something like this (haven't test it):
<View style={{flexDirection: "row"}}>
<View style={{flex: 0.3, backgroundColor: "green"}}/>
<View style={{flex: 0.15, backgroundColor: "brown"}}/>
<View style={{flex: 1, backgroundColor: "silver"}}/>
<View style={{flex: 0.15, backgroundColor: "black"}}/>
</View>
Now, flexDirection makes the children be aligned horizontally, then the flex is basically the variable dimensions the view should cover. You can use dp or percentage here as well.
The third one has a flex of 1, meaning that it will tell RN to use as much space as possible to cover the remaining space.
In order to hide or show a particular view you can either animate them or set the style and modify the flex.
Hope it helps