Category: React

To pass data using React-Native Navigation, we call navigation.navigate with an object with the data we want to send.

For instance, we write

function HomeScreen({ navigation }) {
  return (
    <View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
      <Text>Home Screen</Text>
      <Button
        title="Go to Details"
        onPress={() => {
          navigation.navigate("Details", {
            itemId: 86,
            otherParam: "anything you want here",
          });
        }}
      />
    </View>
  );
}

to call navigation.navigate with an object with some data we want to send to the destination screen.

Then in the destination component, we get the values with

const { itemId, otherParam } = props.navigation.state;

To fix ‘Type ‘null’ is not assignable to type ‘HTMLInputElement” error in React and TypeScript, we can create a type guard function.

Then we use that to check if the ref is an HTMLInputElement.

For instance, we write

const isInputElement = (elem: HTMLElement | null): elem is HTMLInputElement => {
  if (!elem) {
    return false;
  }
  return elem.tagName === "INPUT";
};

if (isInputElement(textInput)) {
  console.log(elem.value);
}

//...

<input
  ref={textInput}
  type="text"
  placeholder="Search"
/>

to create the isInputElement type guard.

Then we check if elem is falsy and return false if it is.

Otherwise we check if the tagName of the elem object if 'INPUT'.

Then we check if the textInput ref is an input element with isInputElement.

And then we get the value property.

To prevent multiple copies Of React from loading, we put the path of React into our Webpack config.

For instance, we write

module.exportrs = {
  resolve: {
    alias: {
      react: path.resolve("node_modules/react"),
    },
  },
};

in webpack.config.js to set the alias for react to path.resolve("node_modules/react").

Then when react is imported, it’s imported from the path returned from path.resolve("node_modules/react")

To target child element styled components with React, we add & before our selectors.

For instance, we write

const ImgGrid = styled.div`
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  & ${ImgCell}:nth-child(2) ${ColorBox} {
    background: #ff00ff;
  }
`;

to seelct the 2nd child of an element with

& ${ImgCell}:nth-child(2) ${ColorBox}

where ImgCell is a selector that has the 2nd child of the element we’re selecting.

To import bootstrap .js and .css files with Webpack, we add it the paths to resolve the files into the Webpack config.

To do this, we write

module.exports = {
  resolve: {
    alias: {
      jquery: path.join(
        __dirname,
        "development/bower_components/jquery/jquery"
      ),
    },
    root: srcPath,
    extensions: ["", ".js", ".css"],
    modulesDirectories: [
      "node_modules",
      srcPath,
      commonStylePath,
      bootstrapPath,
    ],
  },
};

to make Webpack resolve the directories in the modulesDirectories array.

And we include the extensions of the files to resolve in the extensions array.