How to use the react-native-web.Dimensions.get function in react-native-web

To help you get started, we’ve selected a few react-native-web 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 Beven91 / react-native-on-web / packages / react-native-on-web / src / Components / Modal / Modal.js View on Github external
initAnimation() {
    this.screenWidth = Dimensions.get('window').width;
    this.translateX = animateValue(0);
    this.opacity = animateValue(0);
    // 注册的动画
    this.createAnimations = {
      slide: this.slideAnimation.bind(this),
      fade: this.fadeAnimation.bind(this),
    };
  }
github phenomic / phenomic / website / components / PhenomicLogo.js View on Github external
render() {
    const { width } = Dimensions.get("window");

    return (
      <spacer style="{styles.container}">
        
          <spacer style="{{">
            
          </spacer>
        
        {width &gt; 500 &amp;&amp; (
          </spacer>
github taofed / react-web / src / DrawerLayout / DrawerLayout.web.js View on Github external
/**
 * Copyright (c) 2015-present, Alibaba Group Holding Limited.
 * All rights reserved.
 *
 */
'use strict';

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import applyNativeMethods from 'react-native-web/dist/modules/applyNativeMethods';
import {View, Animated, StyleSheet, Dimensions, PanResponder} from 'react-native-web';

const DEVICE_WIDTH = parseFloat(Dimensions.get('window').width);
const THRESHOLD = DEVICE_WIDTH / 2;
const VX_MAX = 0.1;

const IDLE = 'Idle';
const DRAGGING = 'Dragging';
const SETTLING = 'Settling';

class DrawerLayout extends Component {

  static positions = {
    Left: 'left',
    Right: 'right'
  }

  static defaultProps = {
    drawerWidth: 0,
github taofed / react-web / src / ViewPager / ViewPager.web.js View on Github external
/**
 * Copyright (c) 2015-present, Alibaba Group Holding Limited.
 * All rights reserved.
 */
'use strict';

import React, { cloneElement } from 'react';
import PropTypes from 'prop-types';
import {View, Animated, Dimensions, PanResponder} from 'react-native-web';
import dismissKeyboard from 'react-native-web/dist/modules/dismissKeyboard';
import applyNativeMethods from 'react-native-web/dist/modules/applyNativeMethods';

const deviceSize = Dimensions.get('window');
const VIEWPAGER_REF = 'viewpager';

class ViewPager extends React.Component {

  static propTypes = {
    /**
     * Index of initial page that should be selected. Use `setPage` method to
     * update the page, and `onPageSelected` to monitor page changes
     */
    initialPage: PropTypes.number,

    /**
     * Executed when transitioning between pages (ether because of animation for
     * the requested page change or when user is swiping/dragging between pages)
     * The `event.nativeEvent` object for this callback will carry following data:
     *  - position - index of first page from the left that is currently visible