How to use the react-native-ui-lib.Constants.screenWidth 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 wix / react-native-ui-lib / demo / src / screens / componentScreens / CarouselScreen.js View on Github external
import React, {Component} from 'react';
import {StyleSheet} from 'react-native';
import {Constants, View, Text, Carousel, Image, Card} from 'react-native-ui-lib'; // eslint-disable-line
import _ from 'lodash';

const INITIAL_PAGE = 2;
const WIDTH = Constants.screenWidth - 120;

const IMAGES = [
  'https://images.pexels.com/photos/1212487/pexels-photo-1212487.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260',
  'https://images.pexels.com/photos/1366630/pexels-photo-1366630.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500',
  'https://images.pexels.com/photos/1477459/pexels-photo-1477459.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260',
  'https://images.pexels.com/photos/60597/dahlia-red-blossom-bloom-60597.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260'
];

class CarouselScreen extends Component {
  state = {
    currentPage: INITIAL_PAGE
  };

  onChangePage(index) {
    this.setState({currentPage: index});
  }
github wix / react-native-ui-lib / demo / src / screens / componentScreenScreens / EmptyStateScreen.js View on Github external
}}
          numOfPages={2}
          currentPage={this.state.currentPage}
        />
      
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'column',
  },
  pageView: {
    width: Constants.screenWidth,
    height: Constants.screenHeight,
  },
});
github wix / react-native-ui-lib / demo / src / screens / componentScreens / ToastsScreen.js View on Github external
const backgroundColor = selectedColor === 'none' ? undefined : selectedColor;
    const action = showLoader ? [{label: 'Undo', backgroundColor: Colors.red40, onPress: () => Alert.alert('undo')}] : [];
    
    return (
github wix / react-native-ui-lib / demo / src / screens / realExamples / ListActions / ActionsList.js View on Github external
setTimeout(() => {
        this.setState({rightPanelWidth: Constants.screenWidth - 40});
      }, 100);
      this.rightPanel = !this.rightPanel;
github wix / react-native-ui-lib / demo / src / screens / componentScreens / ToastsScreen.js View on Github external
<button label="Show Toast" size="medium"> this.setState({showToast: true})} /&gt;

             this.setState({showToast: false})}
              visible={this.state.showToast}
            /&gt;
          

          </button><button label="Show Toast" size="medium"> this.setState({showToast: true})}/&gt;
                
              
            

            </button>
github wix / react-native-ui-lib / demo / src / screens / componentScreenScreens / EmptyStateScreen.js View on Github external
setCurrentPage(offsetX) {
    if (offsetX >= 0) {
      this.setState({
        currentPage: Math.floor(offsetX / Constants.screenWidth),
      });
    }
  }
github wix / react-native-ui-lib / demo / src / screens / componentScreens / ToastsScreen.js View on Github external
size={15}
        /&gt;
      
    );
  }
}

const styles = StyleSheet.create({
  page: {
    width: Constants.screenWidth,
    flex: 1,
  },
  pageControl: {
    position: 'absolute',
    bottom: 70,
    width: Constants.screenWidth,
  },
});