profile
viewpoint
If you are wondering where the data of this site comes from, please visit https://api.github.com/users/necolas/events. GitMemory does not store any data, but only uses NGINX to cache data for a period of time. The idea behind GitMemory is simply to give users a better reading experience.
Nicolas Gallagher necolas Facebook San Francisco, CA http://nicolasgallagher.com Working on @reactjs for the web

necolas/css3-github-buttons 1117

Helps you easily create GitHub-style buttons and toolbars using links, buttons, and inputs.

necolas/dotfiles 749

OS X dotfiles: bash, git, vim, etc.

necolas/css3-facebook-buttons 577

Simple CSS to recreate the appearance of Facebook's buttons and toolbars.

necolas/css3-social-signin-buttons 473

CSS3 Social Sign-in Buttons with icons. Small and large sizes.

globalizejs/react-globalize 106

Bringing the i18n functionality of Globalize, backed by CLDR, to React

necolas/emitter.js 84

A simple JavaScript event-emitter

necolas/chrome-tab-limit 54

Chrome browser extension that limits you to 20 open tabs

necolas/delegate.js 44

DOM event delegation component

necolas/custom-tweet-button-for-wordpress 37

A fully customisable HTML and CSS Tweet Button for Wordpress. Built using PHP; no JavaScript requirement. Uses the bit.ly and Twitter APIs.

necolas/dom-shims 34

Complete and well-tested shims / polyfills for various DOM API's missing in not-so-modern browsers

issue closednecolas/react-native-web

Support for PlatformColor?

In React Native, there's an API called PlatformColor to get native colors. Is there any plan to support this API in RNWeb in the near future?

closed time in 13 hours

JCMartell

issue commentnecolas/react-native-web

Support for PlatformColor?

Since this API is only for accessing native color names, I don't see how it relates to web

JCMartell

comment created time in a day

issue closednecolas/react-native-web

Meta tags in head

Has anyone got any tips on setting meta tags in head?

I plan to use meta tags to have a nice image and text to share to whatsapp from the app i'm building targeting web, android and ios. The share link going to the web app.

My plan was to investigate using react helmet just in the web app. Alternatively some custom javascript in index.html to listen for history navigation events and can set meta tags on the fly?

Many thanks

closed time in 17 days

axelnormand

issue closednecolas/react-native-web

Should `Button`, `Pressable`, etc fire a `click` event?

The problem Should Button, Pressable, etc fire a click event? Is there a reason why it doesn't?

How to reproduce Simplified test case: sandbox

Steps to reproduce:

  1. Clicking anywhere outside the button emits a click event
  2. Clicking the button doesn't emit a click event

closed time in 19 days

kirbyfu

issue commentnecolas/react-native-web

Should `Button`, `Pressable`, etc fire a `click` event?

They prevent click bubbling. You can listen to the capture phase if needed

kirbyfu

comment created time in 19 days

issue commentnecolas/react-native-web

marginStart and marginEnd are not dynamic

You can't switch the writing direction at runtime at all in React Native. And since the API allows for render-time logic, you must trigger a rerender to update the UI. This is a basic React paradigm. Since updating the language is neither often done, nor on a hot path, triggering a re-render is not a significant ux issue.

What you proposed is similar to what FB does with static atomic CSS, but it breaks down entirely when different dirs are nested together.

A future React API could be designed around runtime ltr/rtl and support multi levels of nesting via a context connected to style resolving. I'm working on this internally. But we can't do that with the existing RN API.

TheEhsanSarshar

comment created time in 19 days

issue closednecolas/react-native-web

marginStart and marginEnd are not dynamic

I know that CSS doesn't have marginStart and marginEnd so React-Native-Web changes them to the marginLeft or marginRight depending on the i18Manager.isRtl result. but when changing the language of the app by using i18Manager.forceRtl(true) those marginLeft and marginRight values are not changing. can we have a better approach internally in react-native-web to handle it out of the box?

if instead of converting marginStart: 10 to margin-left: 10px we use this method

[dir="ltr"] p {
    margin-left: 10px
}

[dir="rtl"] p {
    margin-right: 10px
}

the issue will be solved

closed time in 20 days

TheEhsanSarshar

issue commentnecolas/react-native-web

marginStart and marginEnd are not dynamic

You need to force a re-render of the app after changing the writing direction https://necolas.github.io/react-native-web/docs/localization/#localized-component-layout

TheEhsanSarshar

comment created time in 20 days

issue commentnecolas/react-native-web

numberOfLines=1 does not work on Safari

PR sounds good. Thanks

janicduplessis

comment created time in 23 days

issue closednecolas/react-native-web

Module parse failed: Unexpected token

<!-- Thank you for reporting an issue. Please note that an issue must include the information that is marked as REQUIRED below, or it may be closed. -->

The problem running webpack serve --mode=development --config ./webpack.config.js --inline yields the errors seen below. Also, is adding path.resolve(root, 'node_modules/react-native-keyboard-aware-scroll-view'), in the webpack config file the only thing needed to get third party packages to be compatible with react-native-web?

ERROR in ./node_modules/react-native-keyboard-aware-scroll-view/lib/KeyboardAwareHOC.js 14:12
Module parse failed: Unexpected token (14:12)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| } from 'react-native'
| import { isIphoneX } from 'react-native-iphone-x-helper'
> import type { KeyboardAwareInterface } from './KeyboardAwareInterface'
| 
| const _KAM_DEFAULT_TAB_BAR_HEIGHT: number = isIphoneX() ? 83 : 49
 @ ./node_modules/react-native-keyboard-aware-scroll-view/index.js 3:0-59 8:0-13:1
 @ ./src/authentication/screens/SignInScreen.js 1:508-558
 @ ./src/Router.js 1:442-490
 @ ./src/App.js 1:227-246
 @ ./index.web.js 1:1019-1039

ERROR in ./node_modules/react-native-keychain/index.js 60:7
Module parse failed: Unexpected token (60:7)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| });
| 
> export type SecAccessible = $Values<typeof ACCESSIBLE>;
| 
| export type SecAccessControl = $Values<typeof ACCESS_CONTROL>;
 @ ./src/common/SecureStorageService.js 1:279-311
 @ ./src/store/authentication/UseAuth.js 1:385-429
 @ ./src/Router.js 1:529-570
 @ ./src/App.js 1:227-246
 @ ./index.web.js 1:1019-1039

webpack 5.50.0 compiled with 2 errors in 2296 ms
ℹ 「wdm」: Failed to compile.

My webpack config file


const root = path.resolve(__dirname, './');

module.exports = {
  entry: {
    main: path.resolve(__dirname, './index.web.js'),
  },
  output: {
    path: path.resolve(__dirname, './dist'),
    filename: 'bundle.web.js',
  },
  module: {
    rules: [
      {
        test: /\.(ts|tsx|js|jsx)?$/,
        exclude: /node_modules/,
        include: [
          path.resolve(root, 'index.web.js'),
          path.resolve(root, 'src'),
          path.resolve(root, 'node_modules/react-native-keyboard-aware-scroll-view'),
          path.resolve(root, 'node_modules/react-native-keychain'),
        ],
        use: {
          loader: 'babel-loader',
          options: {
            // Disable reading babel configuration
            babelrc: false,
            configFile: false,
            cacheDirectory: true,
            // The 'metro-react-native-babel-preset' preset is recommended to match React Native's packager
            presets: [
              'module:metro-react-native-babel-preset',
              '@babel/preset-flow',
              '@babel/preset-typescript',
            ],
            // Re-write paths to import only the modules needed by the app
            plugins: ['react-native-web'],
          },
        },
      },
      {
        test: /\.(gif|jpe?g|png|svg)$/,
        use: {
          loader: 'url-loader',
          options: {
            name: '[name].[ext]',
            esModule: false,
          },
        },
      },
    ],
  },
  resolve: {
    alias: {
      'react-native': 'react-native-web',
    },
    extensions: ['.web.js', '.js'],
  },
};

How to reproduce

  1. copy the following package.json
  "name": "admin",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "web": "webpack serve --mode=development --config ./webpack.config.js --inline",
    "start": "react-native start",
    "test": "jest",
    "lint": "eslint ."
  },
  "dependencies": {
    "@fortawesome/fontawesome-svg-core": "^1.2.36",
    "@fortawesome/free-regular-svg-icons": "^5.15.4",
    "@fortawesome/free-solid-svg-icons": "^5.15.4",
    "@fortawesome/react-native-fontawesome": "^0.2.7",
    "@react-navigation/native": "^6.0.2",
    "@react-navigation/native-stack": "^6.1.0",
    "@react-navigation/web": "^1.0.0-alpha.9",
    "apisauce": "^2.1.1",
    "immutability-helper": "^3.1.1",
    "path": "^0.12.7",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-native": "0.64.2",
    "react-native-config": "^1.4.3",
    "react-native-gesture-handler": "^1.10.3",
    "react-native-keyboard-aware-scroll-view": "^0.9.1",
    "react-native-keychain": "^7.0.0",
    "react-native-reanimated": "^2.2.0",
    "react-native-safe-area-context": "^3.3.0",
    "react-native-screens": "^3.5.0",
    "react-native-svg": "^12.1.1",
    "react-native-web": "^0.17.1",
    "webpack": "^5.50.0",
    "webpack-dev-server": "^3.11.2"
  },
  "devDependencies": {
    "@babel/core": "^7.15.0",
    "@babel/preset-flow": "^7.14.5",
    "@babel/preset-typescript": "^7.15.0",
    "@babel/runtime": "^7.15.3",
    "@react-native-community/eslint-config": "^3.0.0",
    "babel-jest": "^27.0.6",
    "babel-loader": "^8.2.2",
    "babel-plugin-react-native-web": "^0.17.1",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-flow": "^6.23.0",
    "babel-preset-react": "^6.24.1",
    "eslint": "^7.32.0",
    "jest": "^27.0.6",
    "metro-react-native-babel-preset": "^0.66.2",
    "react-test-renderer": "17.0.1",
    "url-loader": "^4.1.1",
    "webpack-cli": "^4.7.2"
  },
  "jest": {
    "preset": "react-native"
  }
}
  1. put import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view'; in app.js
  2. put import * as Keychain from 'react-native-keychain'; in app.js
  3. run webpack serve --mode=development --config ./webpack.config.js --inline

Expected behavior localhost:8080 to show my app in browser

Environment (include versions). Did this work in previous versions?

  • React Native for Web (version): "^0.17.1",
  • React (version): "0.64.2",
  • Browser: chrome

closed time in 24 days

WillyRamirez

issue commentnecolas/react-native-web

Module parse failed: Unexpected token

Try not excluding node_modules.

I won't be answering any more questions about webpack configuration.

WillyRamirez

comment created time in 24 days

pull request commentnecolas/react-native-web

Fix keyboard number type

But this is a relevant issue for future xplat react APIs, as it surfaces more limitations of RN's TextInput API

petrbela

comment created time in 24 days

PR closed necolas/react-native-web

Fix keyboard number type

Numeric/decimal keyboardType should also set type=number to allow only numeric keys on desktop and mobile.

+5 -0

4 comments

2 changed files

petrbela

pr closed time in 24 days

pull request commentnecolas/react-native-web

Fix keyboard number type

I don't think so, as that would puncture the API and allow completely different results to be produced on web.

You can either implement that functionality cross platform in JS, or use the unstable_createElement API to create a custom web element using those props, and decide where to fork/recombine that with your RN code in your product.

petrbela

comment created time in 24 days

issue commentnecolas/react-native-web

FlatList: Can't scroll horizontally by dragging the mouse

You can't scroll with mouse drag on web scroll views. No plan to add this

hitman249

comment created time in a month

issue closednecolas/react-native-web

FlatList: Can't scroll horizontally by dragging the mouse

The problem

<FlatList
  horizontal={true}
  showsVerticalScrollIndicator={false}
  showsHorizontalScrollIndicator={false}
  ...
/>

Can't scroll horizontally by dragging the mouse.

Environment (include versions). Did this work in previous versions?

  • React Native for Web (version): 0.16.3
  • React (version): 0.64.0
  • Browser: Chrome

<!-- OPTIONAL:

Additional context Add any other context about the problem here. -->

closed time in a month

hitman249

issue closednecolas/react-native-web

TypeError: Cannot read property 'style' of undefined in react-native

I have used npm i react-native-location-view command to install react-native-location-view for using google map but I faced typeError in \node_modules\react-native-location-view\src\LocationView.js Location. And I haved created the projects using expo init projectName command.

The Version are node -> v16.6.2, npm -> 7.20.3 and expo -> 4.10.0.

File Name locationView.js:

 import React from 'react';
    import PropTypes from 'prop-types';
    import { View, StyleSheet, Animated, Platform, UIManager, 
      TouchableOpacity, Text, ViewPropTypes } from 'react-native';
    import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
    import Entypo from 'react-native-vector-icons/Entypo';
    import axios from 'axios';
    import Events from 'react-native-simple-events';
    import MapView from 'react-native-maps';
    import Geolocation from '@react-native-community/geolocation';
    import AutoCompleteInput from './AutoCompleteInput';
    
    
    const PLACE_DETAIL_URL = 'https://maps.googleapis.com/maps/api/place/details/json';
    const DEFAULT_DELTA = { latitudeDelta: 0.015, longitudeDelta: 0.0121 };
    
    export default class LocationView extends React.Component {
      static propTypes = {
        apiKey: PropTypes.string.isRequired,
        initialLocation: PropTypes.shape({
          latitude: PropTypes.number,
          longitude: PropTypes.number,
        }).isRequired,
        markerColor: PropTypes.string,
        actionButtonStyle: ViewPropTypes.style,
        actionTextStyle: Text.propTypes.style,
        actionText: PropTypes.string,
        onLocationSelect: PropTypes.func,
        debounceDuration: PropTypes.number,
        components: PropTypes.arrayOf(PropTypes.string),
        timeout: PropTypes.number,
        maximumAge: PropTypes.number,
        enableHighAccuracy: PropTypes.bool
      };
    
      static defaultProps = {
        markerColor: 'black',
        actionText: 'DONE',
        onLocationSelect: () => ({}),
        debounceDuration: 300,
        components: [],
        timeout: 15000,
        maximumAge: Infinity,
        enableHighAccuracy: true
      };
    
      constructor(props) {
        super(props);
        if (Platform.OS === 'android') {
          UIManager.setLayoutAnimationEnabledExperimental && UIManager.setLayoutAnimationEnabledExperimental(true);
        }
      }
    
      componentDidMount() {
        Events.listen('InputBlur', this.constructor.displayName, this._onTextBlur);
        Events.listen('InputFocus', this.constructor.displayName, this._onTextFocus);
        Events.listen('PlaceSelected', this.constructor.displayName, this._onPlaceSelected);
      }
    
      componentWillUnmount() {
        Events.rm('InputBlur', this.constructor.displayName);
        Events.rm('InputFocus', this.constructor.displayName);
        Events.rm('PlaceSelected', this.constructor.displayName);
      }
    
      state = {
        inputScale: new Animated.Value(1),
        inFocus: false,
        region: {
          ...DEFAULT_DELTA,
          ...this.props.initialLocation,
        },
      };
    
      _animateInput = () => {
        Animated.timing(this.state.inputScale, {
          toValue: this.state.inFocus ? 1.2 : 1,
          duration: 300,
        }).start();
      };
    
      _onMapRegionChange = region => {
        this._setRegion(region, false);
        if (this.state.inFocus) {
          this._input.blur();
        }
      };
    
      _onMapRegionChangeComplete = region => {
        this._input.fetchAddressForLocation(region);
      };
    
      _onTextFocus = () => {
        this.state.inFocus = true;
        this._animateInput();
      };
    
      _onTextBlur = () => {
        this.state.inFocus = false;
        this._animateInput();
      };
    
      _setRegion = (region, animate = true) => {
        this.state.region = { ...this.state.region, ...region };
        if (animate) this._map.animateToRegion(this.state.region);
      };
    
      _onPlaceSelected = placeId => {
        this._input.blur();
        axios.get(`${PLACE_DETAIL_URL}?key=${this.props.apiKey}&placeid=${placeId}`).then(({ data }) => {
          let region = (({ lat, lng }) => ({ latitude: lat, longitude: lng }))(data.result.geometry.location);
          this._setRegion(region);
          this.setState({placeDetails: data.result});
        });
      };
    
      _getCurrentLocation = () => {
        const { timeout, maximumAge, enableHighAccuracy } = this.props;
        Geolocation.getCurrentPosition(
          position => {
            const { latitude, longitude } = position.coords;
            this._setRegion({latitude, longitude});
          },
          error => console.log(error.message),
          {
            enableHighAccuracy,
            timeout,
            maximumAge,
          }
        );
      };
    
      render() {
        let { inputScale } = this.state;
        return (
          <View style={styles.container}>
            <MapView
              ref={mapView => (this._map = mapView)}
              style={styles.mapView}
              region={this.state.region}
              showsMyLocationButton={true}
              showsUserLocation={false}
              onPress={({ nativeEvent }) => this._setRegion(nativeEvent.coordinate)}
              onRegionChange={this._onMapRegionChange}
              onRegionChangeComplete={this._onMapRegionChangeComplete}
            />
            <Entypo
              name={'location-pin'}
              size={30}
              color={this.props.markerColor}
              style={{ backgroundColor: 'transparent' }}
            />
            <View style={styles.fullWidthContainer}>
              <AutoCompleteInput
                ref={input => (this._input = input)}
                apiKey={this.props.apiKey}
                style={[styles.input, { transform: [{ scale: inputScale }] }]}
                debounceDuration={this.props.debounceDuration}
                components={this.props.components}
              />
            </View>
            <TouchableOpacity
              style={[styles.currentLocBtn, { backgroundColor: this.props.markerColor }]}
              onPress={this._getCurrentLocation}
            >
              <MaterialIcons name={'my-location'} color={'white'} size={25} />
            </TouchableOpacity>
            <TouchableOpacity
              style={[styles.actionButton, this.props.actionButtonStyle]}
              onPress={() => this.props.onLocationSelect({ ...this.state.region, address: this._input.getAddress(), placeDetails: this.state.placeDetails })}
            >
              <View>
                <Text style={[styles.actionText, this.props.actionTextStyle]}>{this.props.actionText}</Text>
              </View>
            </TouchableOpacity>
            {this.props.children}
          </View>
        );
      }
    }
    
    const styles = StyleSheet.create({
      container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
      },
      mapView: {
        ...StyleSheet.absoluteFillObject,
      },
      fullWidthContainer: {
        position: 'absolute',
        width: '100%',
        top: 80,
        alignItems: 'center',
      },
      input: {
        width: '80%',
        padding: 5,
      },
      currentLocBtn: {
        backgroundColor: '#000',
        padding: 5,
        borderRadius: 5,
        position: 'absolute',
        bottom: 70,
        right: 10,
      },
      actionButton: {
        backgroundColor: '#000',
        height: 50,
        position: 'absolute',
        bottom: 10,
        left: 10,
        right: 10,
        justifyContent: 'center',
        alignItems: 'center',
        borderRadius: 5,
      },
      actionText: {
        color: 'white',
        fontSize: 23,
      },
    });

And for the error, please check the attached file, styleError

Advanced thanks!

closed time in a month

imdadulhaque1

pull request commentnecolas/react-native-web

Fix keyboard number type

See https://github.com/necolas/react-native-web/pull/1709

petrbela

comment created time in a month

issue commentnecolas/react-native-web

measureLayout doesn't work properly for ScrollView container

That's a different issue. Please open a new issue

nandorojo

comment created time in a month

issue closednecolas/react-native-web

Unexpected token <Text>

I've spent days and days now trying to get this to run. I'm not clear whether the documentation is inaccurate, or project is just haunted, or what.

Every time someone raises an issue like this the official response is just "something's up with your Webpack". I've followed every configuration possible on the internet identically, and just get the same error:

ERROR in ./src/App.js 155:3
Module parse failed: Unexpected token (155:3)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| 	if (!fontsLoaded) {
| 		return (
> 			<Text>
| 				Loading fonts.
| 			</Text>
 @ ./index.web.js 1:209-229

I honestly don't have a clue what else to try. Does anyone at all see anything wrong with this Webpack set-up?

const path = require('path');
const webpack = require('webpack');

const appDirectory = path.resolve(__dirname, '../');

// This is needed for webpack to compile JavaScript.
// Many OSS React Native packages are not compiled to ES5 before being
// published. If you depend on uncompiled packages they may cause webpack build
// errors. To fix this webpack can be configured to compile to the necessary
// node_module.
const babelLoaderConfiguration = {
  test: /.js$/,
  // Add every directory that needs to be compiled by Babel during the build.
  include: [
    path.resolve(appDirectory, 'index.web.js'),
    path.resolve(appDirectory, 'node_modules/react-native-uncompiled')
  ],
  use: {
    loader: 'babel-loader',
    options: {
      cacheDirectory: false,
      // Babel configuration (or use .babelrc)
      // This aliases 'react-native' to 'react-native-web' and includes only
      // the modules needed by the app.
      plugins: ['react-native-web'],
      // The 'react-native' preset is recommended to match React Native's packager
      presets: ['react-native']
    }
  }
};

// This is needed for webpack to import static images in JavaScript files.
const imageLoaderConfiguration = {
  test: /.(gif|jpe?g|png|svg)$/,
  use: {
    loader: 'url-loader',
    options: {
      name: '[name].[ext]'
    }
  }
};

module.exports = {
  // your web-specific entry file
  entry: path.resolve(appDirectory, 'index.web.js'),

  // configures where the build ends up
  output: {
    filename: 'bundle.web.js',
    path: path.resolve(appDirectory, 'dist')
  },

  // ...the rest of your config

  module: {
    rules: [
      babelLoaderConfiguration,
      imageLoaderConfiguration
    ]
  },

  plugins: [
    // process.env.NODE_ENV === 'production' must be true for production
    // builds to eliminate development checks and reduce build size. You may
    // wish to include additional optimizations.
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'development'),
      DEV: process.env.NODE_ENV === 'production' || true
    })
  ],

  resolve: {
    // If you're working on a multi-platform React Native app, web-specific
    // module implementations should be written in files using the extension
    // .web.js.
    extensions: ['.web.js', '.js']
  }
}

closed time in a month

MitchEff

issue commentnecolas/react-native-web

Unexpected token <Text>

https://necolas.github.io/react-native-web/docs/multi-platform/#compiling-and-bundling

You will need the react preset which is included in the RN one

MitchEff

comment created time in a month

issue closednecolas/react-native-web

Module react-native-web/jest/serializer in the snapshotSerializers option was not found

Note: Also asked the same question in SO but didn't get the reply yet

Question Trying to commit React code to GitHub, when i pushed the code, got this problem

TypeError: Cannot read property 'injection' of undefined

image

To solve this problem, updated react-native-web package to 0.17.0. Then this problem solved but ended up with below error

Module react-native-web/jest/serializer in the snapshotSerializers option was not found

image

Tried to solve this problem but didn't get much discussions in online except this (i didn't get what is he telling exactly)

How to resolve this error

closed time in a month

kiranlanke

issue commentnecolas/react-native-web

Module react-native-web/jest/serializer in the snapshotSerializers option was not found

There is no react-native-web/jest/serializer anymore. You should remove it from your jest setup

kiranlanke

comment created time in a month

create barnchnecolas/react-native-web

branch : 0.18-dev

created branch time in a month

issue closednecolas/react-native-web

module not found in 'react-native' warning eslint import/named

I have a react 16, 0.61.5 project with react-native-web 0.14 after upgrading to react native web 17 everything is still working fine - no warnings after upgrading to react 0.63.4 I started getting eslint warnings on all imports from react-native such as:

  Line 3:10:  Platform not found in 'react-native'  import/named

  Line 2:10:  StyleSheet not found in 'react-native'  import/named
  Line 2:22:  View not found in 'react-native'        import/named

any ideas?

closed time in a month

sirpy

push eventnecolas/react-native-web

Nicolas Gallagher

commit sha eea102fb4297bbfb7b0eb627be25a12efab758d0

Add www bundle script

view details

push time in 2 months

push eventnecolas/react-native-web

Nicolas Gallagher

commit sha 9bfc313ffc920107843eae8f9957b60b12a5f668

Add www bundle script

view details

push time in 2 months

create barnchnecolas/react-native-web

branch : fb-www-script

created branch time in 2 months

issue closednecolas/react-native-web

Content get squashed when keyboard open

The problem When we try to focus on a field and open the keyboard, the whole content get distorted.

How to reproduce As soon as we open a field, the layout is resized.

05f921b8-18de-4b08-85f6-a83a1c6458bb 538c1d9d-fd1c-40e4-899a-8739527f5b10

Expected behavior The layout should not move.

Environment (include versions). Did this work in previous versions?

  • React Native for Web (version): 0.11.7
  • React (version): 16.9.0
  • Browser: Chrome android

closed time in 2 months

minuitagency