How to use the react-native-ui-lib.Colors.dark70 function in react-native-ui-lib

To help you get started, we’ve selected a few react-native-ui-lib examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github rghorbani / react-native-common / src / components / inputs / TextField.js View on Github external
Constants,
  Modal,
  Text,
  Typography,
  View,
} from 'react-native-ui-lib';
import BaseInput from './BaseInput';
import TextArea from './TextArea';

const DEFAULT_COLOR_BY_STATE = {
  default: Colors.dark40,
  focus: Colors.blue30,
  error: Colors.red30,
};
const DEFAULT_UNDERLINE_COLOR_BY_STATE = {
  default: Colors.dark70,
  focus: Colors.blue30,
  error: Colors.red30,
};

/**
 * @description: A wrapper for Text Input component with extra functionality like floating placeholder
 * @extends: TextInput
 * @extendslink: https://facebook.github.io/react-native/docs/textinput.html
 * @modifiers: Typography
 * @gif: https://media.giphy.com/media/xULW8su8Cs5Z9Fq4PS/giphy.gif, https://media.giphy.com/media/3ohc1dhDcLS9FvWLJu/giphy.gif, https://media.giphy.com/media/oNUSOxnHdMP5ZnKYsh/giphy.gif
 * @example: https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/InputsScreen.js
 */
export default class TextField extends BaseInput {
  static displayName = 'TextField';
  static propTypes = {
    ...RNTextInput.propTypes,
github wix / react-native-ui-lib / demo / src / screens / styleScreens / TypographyScreen.js View on Github external
);
        })}
      
    );
  }
}


const styles = StyleSheet.create({
  container: {
  },
  typographyEntry: {
    paddingVertical: 15,
    paddingHorizontal: 25,
    borderColor: Colors.dark70,
    borderBottomWidth: 1,
  },
});
github rghorbani / react-native-common / src / components / inputs / TextInput.js View on Github external
Modal,
  Image,
  Text,
  Typography,
  View,
} from 'react-native-ui-lib';
import BaseInput from './BaseInput';
import TextArea from './TextArea';

const DEFAULT_COLOR_BY_STATE = {
  default: Colors.dark40,
  focus: Colors.blue30,
  error: Colors.red30,
};
const DEFAULT_UNDERLINE_COLOR_BY_STATE = {
  default: Colors.dark70,
  focus: Colors.blue30,
  error: Colors.red30,
};
const LABEL_TYPOGRAPHY = Typography.text80;

export default class TextInput extends BaseInput {
  static displayName = 'TextInput';
  static propTypes = {
    ...RNTextInput.propTypes,
    ...BaseInput.propTypes,
    /**
     * make component rtl
     */
    rtl: PropTypes.bool,
    /**
     * should placeholder have floating behavior
github wix / react-native-ui-lib / demo / src / screens / componentScreens / BadgesScreen.js View on Github external
);
  }
}

const styles = StyleSheet.create({
  container: {
    alignItems: 'center',
    padding: 20,
    backgroundColor: Colors.dark70,
  },
  iconBadgeColumnContainer: {
    flex: 1,
    justifyContent: 'space-between',
    alignItems: 'center',
    flexDirection: 'column',
  },
});
github wix / react-native-ui-lib / demo / src / screens / MainScreen.js View on Github external
}
}

const styles = StyleSheet.create({
  text: {
    textAlign: 'left',
    fontSize: 22,
    padding: 20,
  },
  row: {
    height: 56,
    justifyContent: 'center',
  },
  separator: {
    borderBottomWidth: 1,
    borderBottomColor: Colors.dark70,
  },
  sectionContainer: {
    backgroundColor: Colors.dark20,
    paddingVertical: 4,
    paddingLeft: 12,
  },
  sectionText: {
    ...Typography.text60,
    color: Colors.white,
  },
});
github wix / react-native-ui-lib / demo / src / screens / componentScreens / TabBarScreen.js View on Github external
mode={TabBar.modes.SCROLL}
            selectedIndex={selectedIndex1}
            onChangeIndex={index => this.setState({selectedIndex1: index})}
            style={{height: 48, width: Constants.screenWidth - 40}}
            useGradientFinish
            enableShadow
          >
            
            
            
            
            
            
          
          

        

         this.setState({selectedIndex2: index})}
          style={{height: 48}}
          indicatorStyle={{borderBottomWidth: 2, borderColor: Colors.purple30}}
          useGradientFinish
github rghorbani / react-native-common / src / components / inputs / TextField.js View on Github external
function createStyles({
  placeholderTextColor,
  hideUnderline,
  centered,
  floatingPlaceholder,
}) {
  return StyleSheet.create({
    container: {},
    innerContainer: {
      flexDirection: 'row',
      borderBottomWidth: hideUnderline ? 0 : 1,
      borderColor: Colors.dark70,
      justifyContent: centered ? 'center' : undefined,
      paddingTop: floatingPlaceholder ? 25 : undefined,
      flexGrow: 1,
    },
    focusedUnderline: {
      borderColor: Colors.blue30,
    },
    errorUnderline: {
      borderColor: Colors.red30,
    },
    input: {
      flexGrow: 1,
      marginBottom: hideUnderline ? undefined : Constants.isIOS ? 10 : 5,
      padding: 0,
      textAlign: centered ? 'center' : undefined,
      backgroundColor: 'transparent',
github wix / react-native-ui-lib / demo / src / screens / SettingsScreen.js View on Github external
/>
              
            
          
        

        
        
      
    );
  }
}

const styles = StyleSheet.create({
  block: {
    borderColor: Colors.dark70,
    backgroundColor: Colors.dark80
  }
});

export default SettingsScreen;