CODEWITHSUNDEEP
reactjsreact-native
Adrian Preuss
Adrian Preuss

Reputation: 3113

Dynamical horizontal content views

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:

Main Screen

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.

View with one other subview enter image description here

Is these layout possible? I want lot's of ideas and food for thought!

Upvotes: 0

Views: 44

Answers (1)

sebastianf182
sebastianf182

Reputation: 9978

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

Upvotes: 1

Related Questions