react-native-fill-in-the-gaps

Add it to your project

• Using NPM npm install react-native-fill-in-the-gaps
• or:
• Using Yarn yarn add react-native-fill-in-the-gaps

Usage

import React from "react";
import FillInTheGaps from "react-native-fill-in-the-gaps";

const FillInTheGapsApp = () => {
  const content =
    "Un texte à ##pantalon## ou texte lacunaire est un ##exercice## qui consiste en un texte où des mots manquent, les ##pantalons##, et que l'élève doit remplir. C'est un type d'exercice ##courant## en apprentissage des ##langues.##";
  return (
    <FillInTheGaps
      title="C'est un type d'exercice courant en apprentissage des langues"
      titleStyle={{ fontSize: 18, textAlign: "center", fontWeight: "bold" }}
      containerStyle={{ paddingVertical: 20, paddingHorizontal: 20 }}
      wordsContainerStyle={{ marginVertical: 30 }}
      wordContainerStyle={{ backgroundColor: "#000" }}
      wordStyle={{ color: "#FFF" }}
      textContentStyle={{ fontSize: 16 }}
      buttonStyle={{ backgroundColor: "#000" }}
      buttonTitleStyle={{ color: "#FFF" }}
      buttonContainerStyle={{
        marginTop: "auto",
      }}
      responseRequired={false}
      content={content}
      onDone={(reults) => {
        console.log("reults", reults);
      }}
      additionalWords={["test 1", "test 2"]}
    />
  );
};

export default FillInTheGapsApp;

Properties

Property name	Type	Description
title	String	the title of the exercie
titleStyle	Object	Custom style for the title
containerStyle	Object	Custom style for the container
wordsContainerStyle	Object	Custom style for the words container
wordContainerStyle	Object	Custom style for the container of each word
wordStyle	Object	Custom style for the word
textContentStyle	Object	Custom style the text
buttonContainerStyle	Object	Custom style for the container of the button
buttonStyle	Object	Custom style for the button
buttonTitleStyle	Object	Custom style for the title of the button
content	String	content of the question, the words to be removed must be surrounded by ##
content	Array	extra words to make the question more difficult
responseRequired	Boolean	make the answer mandatory if true. default to false
onDone	Function	Function to handle the results

ISC Licensed