React Native Shared UI

React Native Shared UI is a collection of reusable UI components designed to streamline the development of your React Native applications. This library simplifies the process of creating consistent and stylish user interfaces across different platforms.

Installation

To get started, you can install the package via npm:

``bash
npm install @browntreebear/reactnativesharedui
`

NOTE: any component used from the folder /animations (such as NowPlayingTabBar) has a react-native-gesture-handler dependency.
You must wrap your overall application in the GestureHandlerRootView in order to have the animations work properly.
React Native Gesture Handler -> documentation

Available Scripts

- start: Start the Expo development server.
`bash
npm start
`

- ios: Start the Expo development server in ios.
`bash
npm run ios
`

- type-check: Run typescript check.
`bash
npm run type-check
`

Components (Non Animated)

-Buttons
`bash
import { AppButton } from '@browntreebear/reactnativesharedui/components'

// Some optional styling you can send to the button
optionalStyling={{ alignSelf: 'center' }}
text="Logout" // <- Button Text
onPress={() => {}} // <- Button action
buttonStyle={{ backGroundColor: "#255433", textColor: "#E0E0E0" }}
/>
`

-Loaders
`bash
import { FullScreenLoader, ApplicationLoader, PageLoader }
from '@browntreebear/reactnativesharedui/components'




`

Components (Animated)

`bash
import { NowPlayingTabBar }
from '@browntreebear/reactnativesharedui/animations'

const tabs = [
{
name: 'Home',
item: Any React node icon works here. . I use Iconicons,
},
{
name: 'MyList',
item: ,
},
{
name: 'Settings',
item: ,
}



{state.routes.map((route, i) => {
const isHidden = shouldHideTabBar(route.name);
const isCurrentTab = i === state.index;
return (
key={route.key}
style={[
StyleSheet.absoluteFill,
{ display: isHidden ? 'none' : 'flex' },
{ zIndex: isCurrentTab ? 1 : 0 },
]}
>
{isCurrentTab && descriptors[route.key].render()}

)
})}


tabs={tabs}
onTabChange={handleTabNavigation}
backGroundColor="#10001A"
/>


`

!Tab Navigation Component


-FadeView
-this just fades in and out the child component (for the duration set)

`bash
import { FadeView } from '@browntreebear/reactnativesharedui/animations'


Fadin in and out babbey

`

-AnimatedInput
-this input animates the placeholder above the text input when the user selects

`bash
import { AnimatedInput } from '@browntreebear/reactnativesharedui/animations'

placeholder='Enter your password'
value={inputValue}
inputColor="black"
optionalStyling={{ marginTop: 8 }}
obviscateText={true}
onChangeText={(text) => setInputValue(text)}
/>
``

!Animated Input Component