@appsimples/atlantica-react-native

Atlantica

Permission

• Since this is a private package, you will have to ask for permission to install it in you application
• Once your npm account has been added to the @appsimples organization, login in your terminal using npm login and you are good to go

Getting Started

1) Adding the lib to your project:

To add this lib to your project, simply run yarn add @appsimples/atlantica-react-native

2) Add a theme to your project:

A theme is an object of the type ATLTheme. It can be added in a file as such:

export const theme = {
  // Colors
  ColorPrimary: '#0073E1',
  ColorLightNeutral: '#9E9E9E',
  ColorDarkNeutral: '#464646',
  ...
}

3) Provide the theme to your project:

In your App.tsx file, wrap your screen with the theme provider, providing the previously created theme.

import React, { Component } from 'react'
import { RootNavigation } from './src/navigation/RootNavigation'
import { ATLThemeProvider } from '@appsimples/atlantica-react-native'
import { theme } from './src/theme/Themes'
import { ATLTheme } from '../build/src/theme/ThemeProvider'

export default class App extends Component<> {
  render() {
    return (
      // ATLThemeProvider is needed here order to have the same theme throughout the whole app
      <ATLThemeProvider theme={theme as ATLTheme}>
        <RootNavigation />
      </ATLThemeProvider>
    )
  }
}

That's all the necessary setup! Now you can finally use a component.

4) Using a component:

Now you simply have to import it into your screen and use it.

import { ATLButton } from '@appsimples/atlantica-react-native'
...
return (
    <ATLButton
        title={'MyButton'}
        onPress={onPressMyButton}
    />
)

For more information on the usage of each component, visit our API documentation here.

5) Stylization:

Your components receive its values from the theme we created on step 2 of this guide. However, if you want a particular instance of it to look different, it can be done by overriding its initial props and replacing it with the desired values. In the example that follows, we want this specific instance of the button to have a fontSize of 30.

import { ATLButton } from '@appsimples/atlantica-react-native'
...
return (
    <ATLButton
        title={'MyButton'}
        onPress={onPressMyButton}
        buttonBaseProps={{
            fontSize: 30
        }}
    />
)