react-native-sbxui v2.2.9

react-native-sbxui

###This is inspired by and almost exactly the same as the Starbucks' app's navigation UI and is very easy to use. ###Contact francisj12@icloud.com if you have questions or bug reports. ###Contribute by following Pollar Apps on Instagram or request to be featured. https://www.instagram.com/pollarapps/

Documentation

Requirements

1. You must have Route159-UltraLight font installed for both iOS and Android. This is used for the points number.
2. You should also have the Avenir-Medium font installed for the text in the menu items at the top.
3. If you want to use haptics, which are enabled by default, you must install react-native-haptic. ####If you do not want to install or use these fonts, you can set different fonts in the config.

Installation

####npm install --save react-native-sbxui

Recommended

####I recommend displaying the entire navigation UI in a StackNavigator for when you want to navigate to pages that fill up the entire screen.

How to Use

1 - Config

Config.setConfig({
    menuColor: '',
    menuTextColor: '',
    menuTextColorUnfocused: '',
    menuTextFont: '',
    menuHeight: '',
    pointsColor: '',
    pointsFont: ''
})

2 - Main Components

In a View that fills up the whole screen, render the following in this exact order...

{homePage}
<SBXMenu></SBXMenu>
<SBXScrollView></SBXScrollView>

3 - Home Page

The home page is the page that displays just under the menu that you see when no other page is presented. Make sure that the home page is styled as follows...

{
    top: Config.menuHeight(),
    height: Dimensions.get('window').height-Config.menuHeight,
}

4 - Menu

The following is an example of setting up the menu. Points is the big number on the menu you see in your Starbucks app. Haptics are enabled by default (iOS only) but you can disable them. Haptics occur when a menu item is tapped. Each item is displayed in the menu bar and can be tapped to open its page.

<SBXMenu points={16} enableHaptics={false} items={[
    {
        text: 'Profile',
        onPress: ()=>{}
    },
    {
        text: 'Store',
        onPress: ()=>{}
    }
]}></SBXMenu>

5 - ScrollView

The SBXScrollView is what each page displays and animates on. It will only be visible when a page is being displayed on it. Render each page in any order inside of the SBXScrollView component.

<SBXScrollView>
    {profilePage}
    {storePage}
</SBXScrollView>

6 - Pages

Each page that the menu items open, or that you want to pop up and function with the navigation, must be setup as follows...

<SBXPage name={"Profile"} height={heightSetInTheStyle}>...</SBXPage>

Note that the height property does not set the height, it's simply for the API.

Present a Page

This is where things might get a little confusing... But this is how I recommend going about it... (do this in your render function) 1. Create a let variable called showHeight. 2. The showHeight is how far the user can scroll down so set it to however far the content of the page goes down to. 3. Now for Android add SBXScrollView.ANDROID_INITIAL_SCROLL_OFFSET+27 to showHeight. For iOS subtract SBXScrollView.Y from the showHeight. This makes no sense to you I know... JUST DO IT! 4. Lastly, if the showHeight is less than SBXPage.getMinimumHeight(), set showHeight to that value. This is in case the content of a page takes up less than the height of the scroll view. 5. Now set the actualHeight to = showHeight + 250. This is so when the user scrolls to the bottom they don't see the home page behind the presented page. Set the height in the page's style to this variable. 6. Save the showHeight value somewhere (I recommend in your page statically for easy access), for example... PageClass.showHeight = showHeight

TIP: If you are using PostViews from react-native-shortcuts there is a handy function you can use when making the showHeight variable... PostView.getBottomYOfPosts(posts).

####Now that that's out of the way... ####I recommend having a static function in your page that does the following... (this is so the page can be easily presented from anywhere in your application)

SBXScrollView.presentPage(pageName, height)

####For the height variable, put in your PageClass.showHeight, which is how far the user can scroll down to on that page.

7 - Layout Everything

When you render everything for your app, I recommend rendering <SBXStatusBar /> to make the iOS StatusBar solid at the top. It adds a better effect, and it's what Starbucks does. And then lastly make sure the StatusBar is light-content... <StatusBar barStyle="light-content" />.

That's all folks! Enjoy!

Don't forget to follow Pollar Apps on the gram...

https://www.instagram.com/pollarapps/