Ejemplos de react-native-extended-stylesheet build en JavaScript

Ejemplo n.º 1

Archivo: styles.js Proyecto: Dreykodoon/World-Cleanup-Day

import { ICON_COLOR, WHITE_COLOR, STATUS_BAR_HEIGHT } from '../shared/constants';

const colors = {
  $fbColor: '#43619c',
  $googleColor: '#f24033',
  $grey: '#eeeeee',
  $blue: '#3683d9',
  $red: '#FC515E',
  $iconColor: ICON_COLOR,
  $white: WHITE_COLOR,
  $textColor:'#2B2B2B'
};
const dimensions = {
  $radius10: 10,
  $statusBarHeight: STATUS_BAR_HEIGHT,
  $fontDefaultSize: 13
};

const textVariables = {
  $font: 'noto-sans-regular',
  $boldFont: 'noto-sans-bold',
};

EStyleSheet.build({
  ...colors,
  ...dimensions,
  ...textVariables,
  outline: 0,
});

Ejemplo n.º 2

Archivo: index.android.js Proyecto: thomasobrien99/shaker

  Dimensions,
  Platform,
  BackAndroid
} from 'react-native';
import TabNavigator from 'react-native-tab-navigator'
import EStylesheet from 'react-native-extended-stylesheet'

import CocktailNavigator from './app/navigation/CocktailNavigator'
import IngredientNavigator from './app/navigation/IngredientNavigator'
import MixNavigator from './app/navigation/MixNavigator'

let {height, width} = Dimensions.get('window');

EStylesheet.build({
  rem: (width < 480 ? .875 : (width < 568 ? 1 : (width < 1.125 ? 1 : 1.25))),
  headerColor: "#00648c", //darkblue
  appFont: Platform.OS === 'ios' ? 'Aleo-Bold' : 'aleo_bold'
});

class shaker extends Component {
  constructor(props) {
    super(props)
    this.state = {
      newRoute: {tab: 'mixTab', route:'index'},
      selectedTab : 'mixTab'
    }
  }
  componentDidMount(){
    AsyncStorage.getItem('userIngredients').then((data)=>{
      let userIngredients = JSON.parse(data) || []
      userIngredients.push(31)//ADD ICE TO USER INGREDIENTS ON START

Ejemplo n.º 3

Archivo: appStart.js Proyecto: orion-lab/orion-native-starter

const onBeforeLift = () => {};

const AppStart = StackNavigator({
  Home: { screen: HomeScreen },
}, {
  cardStyle: {
    backgroundColor: '#fff',
  },
});
// Wrapped App component with HOC from react-native-offline
const App = withNetworkConnectivity({
  withRedux: true,
})(AppStart);
// Root component
function Root() {
  return (
    <Provider store={store}>
      <PersistGate
        loading={<PersistLoading />}
        onBeforeLift={onBeforeLift}
        persistor={persistor}>
        <App />
      </PersistGate>
    </Provider>
  );
}
// Calculate stylesheet
EStyleSheet.build();

export default Root;

Ejemplo n.º 4

Archivo: index.js Proyecto: gourav-singhal/loginConcept

  View,
  Image,
  Button,
  TouchableOpacity,
} from 'react-native';

import EStyleSheet from 'react-native-extended-stylesheet';
import {
  StackNavigator,
} from 'react-navigation';

import styles from './index.styles';
import { LandingPage, SignIn, SignUp } from './components/index';

EStyleSheet.build({
  $appThemeColor: '#cfc391',
});

const App = StackNavigator({
  landing: { screen: LandingPage },
  signin: { screen: SignIn },
  signup: { screen: SignUp },
});


const Index = () => (
  <App />
)

export default Index;

Ejemplo n.º 5

Archivo: index.js Proyecto: kelvin2017/react-native-apps-to-production-starter

import React from 'react';
import EStyleSheet from 'react-native-extended-stylesheet';
import { Provider } from 'react-redux';

import Navigator from './config/routes';
import { AlertProvider } from './components/Alert';
import store from './config/store';

EStyleSheet.build({
  $primaryBlue: '#4F6D7A',
  $primaryOrange: '#D57A66',
  $primaryGreen: '#00BD9D',
  $primaryPurple: '#9E768F',

  $white: '#FFFFFF',
  $lightGray: '#F0F0F0',
  $border: '#E2E2E2',
  $inputText: '#797979',
  $darkText: '#343434',
});

export default () => (
  <Provider store={store}>
    <AlertProvider>
      <Navigator onNavigationStateChange={null} />
    </AlertProvider>
  </Provider>
);

Ejemplo n.º 6

Archivo: app.js Proyecto: redpelicans/react-native-android-boilerplate

/* @flow */
import React, {
  Component,
  Text,
  View,
  Navigator,
} from 'react-native';

import StyleSheet from 'react-native-extended-stylesheet';
StyleSheet.build({mainColor: color.paperBlue200.color})

import { typography, color } from 'react-native-material-design-styles';

import {GoogleSignin, GoogleSigninButton} from 'react-native-google-signin'
// doc here : https://github.com/apptailor/react-native-google-signin

import {Button, Avatar, Divider, Card} from 'react-native-material-design'


var Icon = require('react-native-vector-icons/FontAwesome')
var myIcon = (<Icon.Button name="rocket" size={30} backgroundColor={color.paperBlue200.color} color="#900">Hello World</Icon.Button>)

export class App extends Component {
  render() {
    return (
      <View style={[styles.container]}>
        <Button raised={true}
          text="Hello World"/>
          <Divider />
        <Text style={[styles.title]}>It works</Text>
          <Divider inset />

Ejemplo n.º 7

Archivo: App.js Proyecto: adriandeveloper/Tutti

import ReduxThunk from 'redux-thunk';
import { createStore, applyMiddleware } from 'redux';
import firebase from 'firebase';
import reducers from './reducers';
import Router from './Router';


EStyleSheet.build({
  $primaryBlue: '#008AD8',
  $primaryPink: '#FF456E',
  $secondaryPink: '#F60068',
  $darkBlue: '#373E52',
  $facebookColor: '#3C539A',
  $googleColor: '#DB402C',
  $white: '#fff',
  $textColor: '#373e52',
  $offWhite: '#fcfafa',

  // borderStyle: 'solid',
  // borderWidth: 1,
  // borderColor: '#979797',

  // toggle to see where the components are laid out
  // outline: 1,
});

// export default () => <Chat />;

class App extends Component {

  componentWillMount() {
    const config = {

Ejemplo n.º 8

Archivo: app.js Proyecto: Moritz30/crisp-app-mobile

    width: 20,
    height: 20,
    marginRight: 6
  },
  AppBarUserDetail : {
    width: 20,
    height: 20,
    marginRight: 6,
    resizeMode: 'contain'
  },
  AppBarText: {
    color: '#1A3066'
  }
});

EStyleSheet.build(styles);

class Crisp extends React.Component {

    constructor () {
      super();
    }

    render() {
        return (
          <Router >
            <Scene key="root">
                <Scene
                  key = "loader"
                  component = {LoaderPage}
                  hideNavBar={true}