DEV Community: Freddy Huaylla

Answer: hide scrollbar but keep scroll functionality in react.js

Freddy Huaylla — Wed, 17 Jun 2020 02:58:31 +0000

Feb 22 '20

This worked for me, i created an external CSS file just like plain HTML and CSS and then linked it to the react file. It's also cross platform.

.parentDiv{
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
}
.childDiv{
    position: absolute;
    top: 0;
    left: 0;
    bottom: -20px;
    right: -20px; 
    overflow:

…

Open Full Answer

React Native 2 : creacion de proyecto

Freddy Huaylla — Wed, 10 Jun 2020 23:48:03 +0000

md reactnative (crear la ubicacion de mis proyectos)
npx react-native init citas (creacion del proyecto)
npx react-native run-android (ejecutar en un celular , el dispositivo debe tener modo depuracion activado)

comandos utiles:
ctrl+M = lanza modo debugger de Chrome/web

opcional:
https://github.com/jhen0409/react-native-debugger/releases es un debugger para react

React Native 1 requisitos/instalacion

Freddy Huaylla — Mon, 08 Jun 2020 21:53:04 +0000

Set-ExecutionPolicy AllSigned

Set-ExecutionPolicy Bypass -Scope Process -Force; [System.Net.ServicePointManager]::SecurityProtocol = [System.Net.ServicePointManager]::SecurityProtocol -bor 3072; iex ((New-Object System.Net.WebClient).DownloadString('https://chocolatey.org/install.ps1'))

choco install -y nodejs.install python2 jdk8

descargar android studio https://developer.android.com/studio con

(agregamos android virtual DEVICE)

no importaremos ninguna configuracion al instalar este

hacemos una instalación CUSTOM asegurándonos de tener :
(Performance intel HAXM y Android Virtual DEVICE,SDK platform)

asignamos 512 ,1024 , 2048.... en ram

Al terminar la instalación configuracion->->->

SDK Platform ->android9.0 ->tickear intel x86 atom_64_system image

SDK Tools ->android SDK build tools -> 28.0.3

aplicar para instalar los nuevos elementos

VARIABLES DE ENTORNO (Android Home y Platform Tools)

agregar nueva variable del sistema :
ANDROID_HOME
F:\SDK-android-componentes (ejemplo)

editar path agregando una linea mas que contiene:

F:\SDK-android-componentes\platform-tools

usando GoogleMAP en REACT + GoogleApiWrapper

Freddy Huaylla — Mon, 08 Jun 2020 20:22:06 +0000

creado con el fin de reutilizarse en futuros proyectos :)

1 Mapa Basico en React

Crear la aplicacion

 npx create-react-app my-app

Ingresamos a la carptea e instalar google map react

 npm install --save google-maps-react

dentro creamos un componente X.js que incluirá el mapa y otros datos

import React, { Component } from 'react'; //basicos
import { Map, GoogleApiWrapper } from 'google-maps-react'; //de google

 export class Mapa extends Component {

     render() {
         return (
             <Map
                 style={{ width: '100%', height: '100%' }}
                 initialCenter={{ lat: -18.4745998, lng: -70.2979202 }}
                 zoom={14}
                 google={this.props.google}
             >

             </Map>
         );
     }
 }
 export default GoogleApiWrapper({
     apiKey: 'miapikeypersonal'
 })(Mapa);

exportamos el componente X.js en App.js

yarn-start y ya podemos ver el contenido

2 MARK en google map

importar elementos necesarios

   import { Map, GoogleApiWrapper, Marker } from 'google-maps-react';

agregar una marca en el mapa

    <Marker position={{ lat: -18.4745998, lng: -70.2979202 }} />