npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

react-native-row-next

v1.1.2

Published

A wrapper around the react-native View component enabling concise assignment of flexbox properties

Downloads

10

Readme

react-native-row-next

A wrapper around the react-native <View/> component enabling concise assignment of flexbox layout properties.

The idea is to keep JSX as clean as possible, while removing the need to manage stylesheet declarations for common positioning needs.

This is an update forked from react-native-row

Installation

npm install react-native-row-next

Basic Usage

Use react-native-row-next as little or as much as you want. For instance, you could just use the <Row/> to replace

<View style={{flexDirection: 'row'}}/>

with:

import Row from 'react-native-row-next'    
    
<Row/>
    
    
    

But if you are going to the trouble of installing this module consider these other benefits and weigh the option of reducing stylesheet usage in favor of inline shorthands. The first of which is dial.

Dial

One of the most DRY features of react-native-row-next is the dial prop which allows you to replace

<View style={{flex: 1, flexDirection:'row', justifyContent:'center' alignItems:'center'}}>   
    <View style={{width: 50, height: 50, backgroundColor: 'powderblue'}} />
    <View style={{width: 50, height: 50, backgroundColor: 'skyblue'}} />
    <View style={{width: 50, height: 50, backgroundColor: 'steelblue'}} />
</View>

with:

<Row dial={5} flex>
  <View style={{width: 50, height: 50, backgroundColor: 'powderblue'}} />
  <View style={{width: 50, height: 50, backgroundColor: 'skyblue'}} />
  <View style={{width: 50, height: 50, backgroundColor: 'steelblue'}} />
</Row>
    

The child components of Row are positioned according to the position of the dial number on a phone dial pad. In this case 5 is centered along both axis and, because this is a Row, children are horizontally aligned.

Optionally import View from this package instead of from react-native and all of your <View/> components can use dial as well.

import Row, { View } from 'react-native-row-next' 
    
<View dial={5} flex>
  <View style={{width: 50, height: 50, backgroundColor: 'powderblue'}} />
  <View style={{width: 50, height: 50, backgroundColor: 'skyblue'}} />
  <View style={{width: 50, height: 50, backgroundColor: 'steelblue'}} />
</View>

Use View without replacing the core RN View like so

import Row, { View as DialView } from 'react-native-row-next'
 
<DialView dial={5} flex>
    <View style={{width: 50, height: 50, backgroundColor: 'powderblue'}} />
    <View style={{width: 50, height: 50, backgroundColor: 'skyblue'}} />
    <View style={{width: 50, height: 50, backgroundColor: 'steelblue'}} />
</DialView>  

You can also use spaceBetween to override justifyContent:

<View dial={5} spaceBetween flex>
    
...

and spaceAround

<View dial={5} spaceAround flex>

  
...

and use stretch to override alignItems

<View dial={5} stretch flex>
    
...

Flex

<Row flex/>

does this

<View style={{flex:1, flexDirection: 'row'}} />

or

<Row flex={3}/>

is

<View style={{flex:3, flexDirection: 'row'}} />

Reverse

Use reverse to change row to row-reverse or column to column-reverse:

<Row reverse />
<View reverse />

Margin and Padding shorthand

Extra benefits are gained by using react-native-view instead of the core View in that you can use shorthands for margin and padding styles that are based on the css shorthand convention

<Row margin={[20,15]}/>

becomes

<View style={{flexDirection: 'row', marginVertical: 20, marginHorizontal: 15}} />

margin

Shorthand | Style Result ------------ | ------------- margin={20} | {margin: 20} margin={[20]} | {marginVertical: 20} margin={[20,15]} | {marginVertical: 20, marginHorizontal: 15 } margin={[20,15,10]} | {marginTop: 20, marginHorizontal: 15, marginBottom: 10} margin={[20,15,10,5]} | {marginTop: 20, marginRight: 15, marginBottom: 10, marginLeft: 5}

padding

Shorthand | Style Result ------------ | ------------- padding={20} | {padding: 20} padding={[20]} | {paddingVertical: 20} padding={[20,15]} | {paddingVertical: 20, paddingHorizontal: 15} padding={[20,15,10]} | {paddingTop: 20, paddingHorizontal: 15, paddingBottom: 10} padding={[20,15,10,5]} | {paddingTop: 20, paddingRight: 15, paddingBottom: 10, paddingLeft: 5}

Contributions and issues very much welcome!