Warning !

I am currently facing issues with this lib on Expo. To everyone who tries this library, do not hesitate to open an issue if you face it too, just to see if I'm the only one who has this problem ! I'm working on it ! Thank you !

DesignSprint

DesignSprint is a little component library I made while I was learning React Native.

This library has not been tested on IOS ! I cannot guarantee the result on IOS for the time being !

This react native library offers some components to make mobile coding faster with prebuilt and fully-personnalizable widgets. I'll give you some screenshots to see what are the default components of this lib, but remember that you can always (on every component of this lib) add your own style to customize 'em ! This lib has been coded with only the standard react-native components, no external library has been used !

Here is a list of the widgets:

• Avatar (utilisateur) :
• Clickable (bouton) :
• colors (a full package of colors),
• DropDown (a button which displays a list on click) :
• LoginForm (login form) :
• Input (a text input) :
• Layout (an default app layout),
• Spacer (a horizontal or vertical spacer),
• Title (a very big text) :

Since v1.0.6, this lib adds little functions to make programming easier :

• log (e: any) which equals to console.log(e: any) : makes it faster to type,
• toast (e: string) which equals to a short centered Android toast : it has not been tested on IOS !
• capitalize (e: string) which returns a string capitalized like in this example : capitalize('hello world') ==> 'Hello world'
• ftoi (e: number) which returns the entire part of a float : ftoi(4.55) ==> 4

Installation

To install DesignSprint, just type in your project folder : For npm :

npm i react-native-design-sprint

For yarn :

yarn add react-native-design-sprint

And then, import the components you want to use in your project, as you could have done for react native components :

import { Component1, Component2 } from 'react-native-design-sprint';

You're done !

How to use

This lib's components are used the same way than react-native's ones :

import { Avatar, Title } from 'react-native-design-sprint';

const App = () => {
  return (
    <Title> My title </Title>
    <Avatar text='My avatar' />
  )
}

export default App;

Next, you'll see a list of every component's options, to understand how they work, and how you can customize them.

Components' options

Avatar

Clickable

If you want to render icons in front of text, you should use the children prop !

colors

Its a file where many colors are defined. It is used this way : colors.COLORNAME. For example : colors.red900. Refer to src/colors.tsx to see the list !

SlidingPanel

SlidingPanel has no function like _panelRef.open() or _panelRef.close() at the moement. But it is under developpement !

DropDown

If you want to pass style for each item of the list, do it through your renderItem function !

LoginForm

Input

Layout

Spacer

Title

Contribute

Feel free to contribute if you know how to make this lib better !