Building UI should be easy

Writing cross-platform React Native components is hard. Shoutem UI Toolkit makes UI as easy as it should be.

Basic Button component

<Button styleName="dark">
  <Text>ADD TO BASKET</Text>
</Button>

With Shoutem UI Toolkit

Nice and easy!
var style = StyleSheet.create({
  button: { backgroundColor: '#222', borderRadius: '4px' },
  text: { color: 'white' }
});

<TouchableOpacity style={style.button}>
  <Text style={style.text}>ADD TO BASKET</Text>
</TouchableOpacity>

With plain React native

Unsightly and tedious.

From basics to complex layouts

Shoutem UI toolkit consists from 20+ UI components aimed at real-world problem solving.

<Button>
  <Icon name="add-to-basket" />
  <Text>ADD TO BASKET</Text>
</Button>
<Tile>
  <Image source="http://shoutem.github.io/ui/images/examples/image-9.jpg">
    <Title>Cool black and white stylish watches</Title>
    <Subtitle styleName="strikethrough">$280.00</Subtitle>
    <Heading>$250.00</Heading>
    <Button>
      <Icon name="add-to-basket" />
      <Text>ADD TO BASKET</Text>
    </Button>
  </Image>
</Tile>
<NavigationBar
  leftComponent={...}
  centerComponent={...}
  rightComponent={...}
/>
<Tile>
  {children}
</Tile>
<ListView data={...} >
  <GridRow>
    <Card> {children} </Card>
    <Card> {children} </Card>
  </GridRow>
</ListView>
Explore 20+ components

UI Themes

Screenshot of the 'Rubicon' theme Screenshot of the 'Arno' theme Screenshot of the 'Sesia' theme

Style your React Native apps from a single place using themes that work similar to SASS/CSS.

Explore themes

Animations

Shoutem UI Toolkit provides beatiful transitions both between the screens as well within the screens, with beautiful parallax effect on scrolling, headers collapsing to navigation bar, load more animations, preloaders, and more.