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
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.
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.
I am using a ScrollView to enable multiple pages in my application. On one page, I am trying to implement a custom made slider. However, I am facing problems as any sliding motion triggers the ScrollView to start changing pages.
In pseudo-code, it is something like this:
<ScrollView horizontal={true}>
<View style={styles.page}><Text>First Page</Text></View>
<View style={styles.page}>
<View style={styles.slider}>
<View style={styles.sliderRange}>
</View>
</View>
</View>
</ScrollView>
How can I disable this scroll when touching my custom Slider Range? I could probably manually reverse the ScrollView's scrolling effect by calculating and reversing X, but that seems like unnecessary effort.
Thanks!
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}]}
In screen shot shown how to place the 3 dots icon in top right side right now its in center.
Using https://react-native-training.github.io/react-native-elements/docs/listitem.html
Sample Code
<ListItem
containerStyle={styles.containerStyle}
title={this.getTitleView(data)}
subtitle={this.getAddressView(data)}
leftElement={this.getAvatarView(data)}
rightElement={<Icon type="material" color="#C8C8C8" name="more-vert" />}
/>
Basically I want the rightElement to be placed on top instead of center
I got the icon to move up, but I wasn't able to make it move even more to the right.
To actually get the <Icon> to align to the top corner add the containerStyle prop to it and use the alignSelf: 'flex-start' style, just like this:
rightElement={<Icon containerStyle={{ alignSelf: 'flex-start' }} type="material" color="#C8C8C8" name="more-vert" />
It should look like this image.
Hope this helps.