If you come up with the Atom IDE, that will a great help to use "atom-react-native-css" then you can code by SCSS and it will generate the JS stylesheet without wory about learning new style language from Ract Native .

Example from SCSS file:

.buttonRound {  
    background-color: #fff;  
    padding: 12px;  
    border-color: #ddd;  
    border-width: 1;  
    align-self: center;  
    border-radius: 20px;  
    margin-top: 12px;  
    margin-left: 10px;  
    margin-right: 10px;  
    width: "JS(width-30)";
}

and the output JS will be:

import React, {StyleSheet, Dimensions, PixelRatio} from "react-native";
const {width, height, scale} = Dimensions.get("window"),
    vw = width / 100,
    vh = height / 100,
    vmin = Math.min(vw, vh),
    vmax = Math.max(vw, vh);

export default StyleSheet.create({
   "buttonRound": {
        "backgroundColor": "#fff",
        "paddingTop": 12,
        "paddingRight": 12,
        "paddingBottom": 12,
        "paddingLeft": 12,
        "borderColor": "#ddd",
        "borderWidth": 1,
        "alignSelf": "center",
        "borderRadius": 20,
        "marginTop": 12,
        "marginLeft": 10,
        "marginRight": 10,
        "width": width-30
    },
});

results matching ""

    No results matching ""