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

To help you get started, we’ve selected a few react-native 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 chetstone / react-native-palette / example / utils / ImagePicker.js View on Github external
export default function(storeImage, useNamed) {
  var max = Math.max(Dimensions.get('window').width,Dimensions.get('window').height);

  const options = {
    quality: 0.5,
    maxWidth: max|0, /* convert double to int by bitwise OR */
    maxHeight: max|0,
  };


  let pickOptions = {quality: "low"};

  //console.log("In ImagePicker");
  ImagePicker.launchImageLibrary(options, (response) => {
    var colors = {};

    //console.log('Response = ', response);
    if (response.didCancel) {
github GeekyAnts / NativeBase-TodoApp / app / components / todo.js View on Github external
import React, { Component } from 'react';
import { Container, Header, Title, Content, InputGroup, Input, List, Button, Icon } from 'native-base';
import { View, Text, Dimensions } from 'react-native';

import TodoItem from './TodoItem';

const { width } = Dimensions.get('window');

export default class Todo extends Component {

  static propTypes = {
    removeTodo: React.PropTypes.func,
    setVisibilityFilter: React.PropTypes.func,
    toggleTodo: React.PropTypes.func,
    todos: React.PropTypes.array,
    displayType: React.PropTypes.string,
  }

  constructor(props) {
    super(props);
    this.state = { inputText: '', displayType: 'all' };
  }
github FiberJW / pul / screens / GetPasswordScreen.js View on Github external
);
  }
}

const styles = StyleSheet.create({
  container: {
    backgroundColor: "white",
    justifyContent: "space-between",
    paddingHorizontal: 16,
    paddingBottom: 16
  },
  fieldContents: {
    fontFamily: "open-sans",
    height: 40,
    width: Dimensions.get("window").width * 0.60,
    color: colors.black,
    fontSize: 18
  },
  assistedTextInputContainer: {
    flexDirection: "row",
    justifyContent: "space-between",
    alignItems: "center"
  },
  touchable: {
    alignSelf: "flex-end"
  },
  touchableText: {
    fontFamily: "open-sans-semibold",
    fontSize: 24,
    color: colors.black
  },
github huanxsd / MeiTuan / src / common / screen.js View on Github external
/**
 * Copyright (c) 2017-present, Liu Jinyong
 * All rights reserved.
 *
 * https://github.com/huanxsd/MeiTuan  
 * @flow
 */

import { Dimensions, Platform, PixelRatio } from 'react-native'

export default {
  width: Dimensions.get('window').width,
  height: Dimensions.get('window').height,
  onePixel: 1 / PixelRatio.get(),
  statusBarHeight: (Platform.OS === 'ios' ? 20 : 0)
}
github bulenttastan / react-native-list-popover / ListPopover.js View on Github external
/**
 * ListPopover - Popover rendered with a selectable list.
 */
"use strict";

import React from 'react';
import PropTypes from 'prop-types';
import {
  ListView,
  StyleSheet,
  Text,
  Dimensions,
  TouchableOpacity,
  View
} from 'react-native';
const SCREEN_HEIGHT = Dimensions.get('window').height;
const noop = () => {};
const ds = new ListView.DataSource({rowHasChanged: (r1,r2)=>(r1!==r2)});

class ListPopover extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      dataSource: ds.cloneWithRows(this.props.list)
    };
  }

  componentWillReceiveProps(nextProps) {
    if (nextProps.list !== this.props.list) {
      this.setState({dataSource: ds.cloneWithRows(nextProps.list)});
    }
  }
github EsecuBit / EsecuBit-react-native-wallet / app / components / bar / ProgressBar.js View on Github external
import {View, Easing, Animated, StyleSheet, Dimensions} from 'react-native'
import {Color, Dimen} from '../../common/Styles'

const styles = StyleSheet.create({
  background: {
    backgroundColor: '#BBBBBB',
    height: 6,
    overflow: 'hidden',
    justifyContent: 'center',
    marginTop: Dimen.SPACE,
    borderRadius: 5
  },
  fill: {}
})

const deviceW = Dimensions.get('window').width

type Props = {
  width: number,
  easing: ?any,
  style: ?StyleSheet.Styles,
  progress: number,
  easingDuration: ?number,
  radius: ?number
}

type State = {
  progress: Animated,
  progressColor: ?string
}

export default class ProgressBar extends PureComponent {
github DaiYz / NetEaseCloudMusic / application / navigator.config.js View on Github external
import React from 'react'
import { TouchableOpacity, Text, Dimensions, View } from 'react-native'
import { createStackNavigator, createBottomTabNavigator, createAppContainer, createSwitchNavigator, StackViewTransitionConfigs } from 'react-navigation'
import Badge from './components/Badge'
import SimpleLine from 'react-native-vector-icons/SimpleLineIcons'
import Views from './views'
import SvgIcon from 'react-native-svg-iconfont'
import * as iconPath from './source/svg'
import WaveLoading from './components/wave'
import Stores from './stores'
const { width } = Dimensions.get('window')
const _HEADER_BACK_BUTTON = (navigation) => {
  const { routeName } = navigation.state
  return ( navigation.goBack()}
  >
    
  )
}

const _HEADER_RiGHT_BUTTON = (navigation) => {
  const { routeName, params = {} } = navigation.state
  const appTheme = params?.theme ? params.theme : Stores.app.theme
  const musicPlayNow = params?.playNow ? params.playNow : Stores.app.playNow
  return (
github brandingbrand / flagship / packages / fsengagement / src / inboxblocks / TabbedStory.tsx View on Github external
import React, { Component, Fragment } from 'react';
import {
  Dimensions,
  Image,
  StyleSheet,
  TouchableOpacity,
  View
} from 'react-native';
import TabbedStoryItem from './TabbedStoryItem';
import { Navigation } from 'react-native-navigation';

const closeX = require('../../assets/images/dark.png');
const { width: viewportWidth, height: viewportHeight } = Dimensions.get('window');

const styles = StyleSheet.create({
  backButton: {
    position: 'absolute',
    zIndex: 10,
    top: 49,
    left: 10,
    padding: 0
  },
  bottom: {
    flex: 1,
    justifyContent: 'flex-end',
    marginBottom: 40,
    marginHorizontal: 25
  },
  fullScreen: {
github react-native-community / react-native-side-menu / index.js View on Github external
height: number,
    },
  },
};

type State = {
  width: number,
  height: number,
  openOffsetMenuPercentage: number,
  openMenuOffset: number,
  hiddenMenuOffsetPercentage: number,
  hiddenMenuOffset: number,
  left: Animated.Value,
};

const deviceScreen: WindowDimensions = Dimensions.get('window');
const barrierForward: number = deviceScreen.width / 4;

function shouldOpenMenu(dx: number): boolean {
  return dx > barrierForward;
}

export default class SideMenu extends React.Component {
  onLayoutChange: Function;
  onStartShouldSetResponderCapture: Function;
  onMoveShouldSetPanResponder: Function;
  onPanResponderMove: Function;
  onPanResponderRelease: Function;
  onPanResponderTerminate: Function;
  state: State;
  prevLeft: number;
  isOpen: boolean;
github trazyn / SoundcloudMobX / src / screens / Charts / Category / index.js View on Github external
style4container: {
                                    width,
                                    transform: [{
                                        rotate: '0deg'
                                    }]
                                }
                            }} />
                        
                    )
                }
            
        );
    }
}

const { width, height } = Dimensions.get('window');
const styles = StyleSheet.create({
    container: {
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
        backgroundColor: '#fff',
    },

    header: {
        position: 'absolute',
        top: 0,
        left: 0,
        width,
        height: 150,
        zIndex: 9
    },