I'm trying to use this https://github.com/rkit/react-select2-wrapper in my browserify'd js.. like this:
var React = require("react");
import Select2 from 'react-select2-wrapper';
<Select2 options={{
placeholder: 'Select Location'
}}/>
But I get an error when compiling: Browserify Failed!: Cannot find module 'jquery.mousewheel'
I'm probably doing something wrong. Any ideas please?
Related
What is the simplest way to implement Multi-Platform Setup for a component in Expo. I have tried mamy diferent ways.. it was working on web but it is failing on Native and failing with Jest & #testing-library/react-native. Ideally I would like the least amount of custom config etc (do not want to eject). I expect the file structure to look like this:
Component
|- index.tsx
|- Component.native.tsx
|- Component.web.tsx
I am not sure how to do the index.tsx. I saw someone say something like this would work:
// index.tsx
// #ts-ignore
export { default } from "Component"
this didn't work so I did
// index.tsx
// #ts-ignore
export { default } from "./Component"
This worked for web, but the jest test said
Cannot find './Component'
However, Jest was able to find:
'./Component.mobile.tsx'
'./Component.web.tsx'
I tried:
// index.tsx
// #ts-ignore
import Component from "./Component";
export default Component
and the tests was the same
and the native emulator said:
Unable to resolve module ./Component
I tried using lazy loading but this does not work on web.
import { lazy, Suspense } from "react";
import { Platform } from "react-native";
import Loading from "../../components/Loading";
import { ComponentType } from "./types";
const Web = lazy(() => import("./Component.web"));
const Mobile = lazy(() => import("./Component.mobile"));
const Component: ComponentType = (props) => {
const isWeb = Platform.OS === "web";
return (
<Suspense fallback={<Loading message="Loading Component" />}>
{isWeb ? <Web {...props} /> : <Mobile {...props} />}
</Suspense>
);
};
export default Component
Questions
how to use diferent files for components depending on platform (exlude other files from build)
how to make it ok with ts in vscode
Using Expo 44. Thanks
I would use named exports. So begin by having the same component name in both files. Next I would have one file called Component.tsx and the other Component.native.tsx. That will be enough to allow the bundler to pull the native for native and the other for non-native (in other words web). That should be all you need.
How can i assign one or more progress on circle progress as shown below
I'm using the library react-native-circular-progress
Current:
Expect:
Thanks all !
You can install react-native-circular-gradient-progress to implement this.
If you are using npm then please write
npm install react-native-circular-gradient-progress
If you are using yarn then please write
yarn add react-native-circular-gradient-progress
You can use it like below:
import React from "react";
import { CircularProgress } from "react-native-circular-gradient-progress";
const HomePage: React.FunctionComponent = () => (
<CircularProgress
color="#F00"
size={size}
progress={progress}
/>
)
export default HomePage;
And u will get result like this:
For further explanation of props you can read documentation.
I have a functional component, I wanted to import that component and use it inside Accordion which is a third party package for making collapsible. Package name: react-native-collapsible/Accordion
My Component:
function _renderADHeader() {
...
...
...
export default connect(mapStateToProps, mapDispatchToProps)(_renderADHeader);
In my main file I have exported this component in the following way:
import {_renderADHeader} from './sections/address/headerBar/index';
And I wanted to use it inside Accordion
<Accordion
renderHeader={_renderADHeader}
/>;
But, I am getting the following error:
TypeError: renderHeader is not a function.
I tried to write this._renderHeader , but that is also not working. Please tell me what I am doing wrong.
I'm using the react-native-mapbox-gl/maps library in my react-native app, and I'm trying to show a <MapboxGL.ShapeSource that loads a GeoJson source, like this.
I have this code that is working, however, as the GeoJson data takes a while to finish loading, I couldn't find a way to show to the user if the data is loading or it is ready, with a Spinner for instance.
My question is: is there a way to detect when the MapboxGL.ShapeSource finishes loading its data or when the MapboxGL.FillLayer is visible in the Map?
import React from 'react';
import MapboxGL from '#react-native-mapbox-gl/maps';
const DemographicsMapLayer = () => {
const dataSourceUri = 'https://gist.githubusercontent.com/victor0402/dc3b40195a55ed998a45189b7fb4939b/raw/d7021c29637621e07a82e771d89ea278de48fb99/demographics.json'
return (
<MapboxGL.ShapeSource id={'demographicSourceID'} url={dataSourceUri}>}
<MapboxGL.FillLayer
id={'Millenials'}
key={'Millenials'}
sourceID={'demographicSourceID'}
filter={['==', '$type', 'Polygon']}
style={{ fillOpacity: 0.4 }}
onLayout={e => console.log('[FillLayer] onLayout', e)}
/>
</MapboxGL.ShapeSource>
Version of the lib in my package.json file:
"#react-native-mapbox-gl/maps": "^8.1.0-rc.9",
I tried using the onLayout event in both FillLayer and ShapeSource, but couldn't get useful information, maybe I'm looking the wrong thing.
Having to work with an application that someone else developed and not available anymore. Pretty new to React-Native and Expo. Keep on getting this error:
fontFamily 'FontAwesome' is not a system font and has not been loaded through Expo.Font.loadAsync.
- If you intended to use a system font, make sure you typed the name correctly and that it is supported by your device operating system.
- If this is a custom font, be sure to load it with Expo.Font.loadAsync.
I googled this and got some other links about what people were encountering and how they solved it e.g.
import {Font} from 'expo' and async load it in via componentDidMount
import {FontAwesome} from '#expo/vector-icons' package
tried deleting where it was used and refreshing app
Here is an example of an Icon a previous developer returned:
<Icon name="sign-in" color={'#FFFFFF'} type="font-awesome" />;
which is being imported like this from react-native-elements:
import { Icon, Button } from 'react-native-elements'
All of these ways I tried didn't work. Tried reading up on Custom Font loading but it looks like everything is being done right to me in the repo. Any help appreciated!
I would use react-native-vector-icons to load in font-awesome.
Make sure and run rnpm link after you yarn or npm install the module.
Using
import Icon from 'react-native-vector-icons/FontAwesome';
const myIcon = (<Icon name="rocket" size={30} color="#900" />)